Horizontal list items
This fiddle shows how
http://jsfiddle.net/9th7X/
ul, li {
display:inline
}
Great references on lists and css here:
http://alistapart.com/article/taminglists/
Updated Answer
I've noticed a lot of people are using this answer so I decided to update it a little bit. No longer including support for now-unsupported browsers.
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
}
<ul>
<li> <a href="#">some item</a>
</li>
<li> <a href="#">another item</a>
</li>
</ul>
A much better way is to use inline-block
, because you don't need to use clear:both
at the end of your list anymore.
Try this:
<ul>
<li>
<a href="#">some item</a>
</li>
<li>
<a href="#">another item</a>
</li>
</ul>
CSS:
ul > li{
display:inline-block;
}
Have a look at it here : http://jsfiddle.net/shahverdy/4N6Ap/
I guess the simple solution i found is below
ul{
display:flex;
}