是否有最佳的选择浮动：左或显示：内联水平排列列表项？
例如：http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/
我个人不喜欢浮动，但也许更多的是一种情感的事情，而不是逻辑的。
解决方法
ul { list-style-type: none; overflow: hidden; width:200px; }
ul li { float:left; width: 100px; }
ul li a { display: block; padding: 10px; width:80px; }
ul li a:hover { background: black; }
<ul>
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="httpt://www.google.com">Google</a></li>
</ul>
这是我最喜欢的，主要是因为当你使用display：inline你不能设置属性，如width，padding(top和bottom)，margin等…这是布局的一个障碍。
EDIT 2014
也可以使用display：inline-block属性。一个想法要注意的是，一旦你将列表元素列入内联或嵌入块，就会考虑到白空格。因此，元素之间将会有不必要的空间。
ul { list-style-type: none; width: 300px; font-size: 0; }
ul li { display: inline-block; *display: inline; zoom: 1; margin-right: 10px; }
/* The *display and zoom is a IE hack,though can't remember
now which one (guess it is IE7) */
ul li a { display: inline-block; padding: 10px; font-size: 13px; }
检查fiddle在这里。
如果您不想使用font-size属性(用于浏览器兼容性问题)，还可以使用html注释来摆脱空格！虽然我喜欢上面的方法。
<ul><!--
--><li><a href="http://www.facebook.com">Facebook</a></li><!--
--><li><a href="httpt://www.google.com">Google</a></li><!--
--></ul>
