在float: left或display: inline中是否有用于水平对齐列表项的最佳选择？
例如：http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/
就我个人而言，我不喜欢float，但这可能更多的是一种情感上的东西，而不是逻辑上的东西。
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时，你不能设置宽度、填充（顶部和底部）、边距等属性……这对布局来说是一个障碍。
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; }
在这里检查小提琴。
如果你不想使用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>
怎么样
li {
display:inline-block
};
然后，您可以设置宽度、高度、填充、边距等属性。
我注意到在chrome中显示LI的内联时出现了一些渲染错误。我的LI边界有时不会使用适当的水平填充进行渲染。
不过，总的来说，我喜欢内联，它仍然给你水平边距和填充，你可以做一个很好的文本对齐：居中；在UL上，并将UL用于垂直间隔。
我倾向于使用float纯粹是因为LI默认情况下是一个块元素，在我看来应该这样处理，但两者都有明确的用例。
这是个人喜好。
从CSS的角度来看，Display:Inline=Float:Left(Right)
当涉及到使元素水平时，如<li>。
css规则Float比Display更新。