CODEWITHSUNDEEP
htmlcsshtml-lists
hytromo
hytromo

Reputation: 1531

Independent margin for list items

As you can see in this fiddle: http://jsfiddle.net/h0qu4ffv/ I set the margin-top of 1 list item to be 50px, but all of them follow this style.

How can I have an independent margin for each list item, or, better yet, what is the correct way in order to have an unordered horizontal list with each item to different distance (from top, e.g.)?

Upvotes: 0

Views: 109

Answers (3)

Restro Fad
Restro Fad

Reputation: 25

The only way to have different styles on each element of the list, is to define a different style for each one.someting like this:

<ul>
    <li style="margin-top: margin1">
        Item 1
    </li>
    <li style="margin-top: margin2">
        Item 2
    </li>
    <li style="margin-top: margin3">
        Item 3
    </li>
</ul>

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15981

you can use :nth-child

Js Fiddle

ul li:nth-child(1) {
    margin-top:50px;

}

Upvotes: 0

starvator
starvator

Reputation: 1017

Have you tried making the position:relative, then adjusting the items using top

<ul>
 <li>
    Item 1
 </li>
 <li id="seconditem">
    Item 2
 </li>
 <li id="lastitem">
    Item 3
 </li>
</ul>

then your css

ul {
list-style-type: none;
border: 2px solid black;
}

ul li {
display: inline-block;
border: 2px solid green;
position: relative;
}

#lastitem {
top: 30px;
}
#seconditem {
top: 50px;
}

Upvotes: 2

Related Questions