更新答案

我注意到很多人都在使用这个答案，所以我决定稍微更新一下，不再支持现在不支持的浏览器。

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>

我想我找到的简单解决方案如下

ul{
    display:flex;
}

这把小提琴展示了
http://jsfiddle.net/9th7X/

ul, li {
    display:inline
}

关于列表和css的重要参考：
http://alistapart.com/article/taminglists/

更好的方法是使用inline-block，因为您不再需要在列表末尾使用clear:both。
试试这个：

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

CSS：

ul > li{
    display:inline-block;
}

在这里看看它：http://jsfiddle.net/shahverdy/4N6Ap/

还可以使用内联块来避免浮动元素

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

然后将样式设置为：

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

这样你就不需要浮动任何东西，消除了对clearfix的需求

Here您可以找到一个工作示例，其中包含一些关于动态调整列表大小的建议。
我使用了display：inline-block和一个百分比填充，这样父列表可以动态地改变大小：

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

加上另外两个规则来移除第一项和最后一项的填充。

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

强力特克斯

ul {
            list-style: none;
            display: flex;
            justify-content: space-around;
        }

<ul>
            <li>bla</li>
            <li>blabla</li>
            <li>blablabla</li>
        </ul>