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/

This fiddle shows how

http://jsfiddle.net/9th7X/

ul, li {
display:inline
}

Great references on lists and css here:

http://alistapart.com/article/taminglists/

You could also use inline blocks to avoid floating elements

<ul>
<li>
<a href="#">some item</a>
</li>
<li>
<a href="#">another item</a>
</li>
</ul>

and then style as:

li{
/* with fix for IE */
display:inline;
display:inline-block;
zoom:1;
/*
additional styles to make it look nice
*/
}

that way you wont need to float anything, eliminating the need for clearfixes

Here you can find a working example, with some more suggestions about dynamic resizing of the list.

I've used display:inline-block and a percentage padding so that the parent list can dynamically change size:

display:inline-block;
padding:10px 1%;
width: 30%

plus two more rules to remove padding for the first and last items.

ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}

I guess the simple solution i found is below

ul{
display:flex;
}