Reputation: 1531
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
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
Reputation: 15981
you can use :nth-child
ul li:nth-child(1) {
margin-top:50px;
}
Upvotes: 0
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