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;
}

Tags:

Html

Css