有没有最好的选择float: left or display: inline用于水平对齐列表项？
eg: http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/ 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; }
检查fiddle http://jsfiddle.net/c7m7c/ here.
如果您不想使用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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
