float: left 或 display: inline 中是否有最佳选择用于水平对齐列表项？
例如：http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/
就我个人而言，我不喜欢float，但这可能更多的是一种情绪化的东西，而不是合乎逻辑的。
【问题讨论】：
display:inline，因为它们不是为此而设计的。就像给表格单元格提供其他显示值一样。 float 是我会选择的。
标签： css html-lists
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。
如果您不想使用font-size 属性（用于浏览器兼容性问题），您还可以使用 html cmets 去除空格！虽然我更喜欢上面的方法。
<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 的 Inline 时出现了一些渲染错误。我的 LI 边框有时无法使用适当的水平填充进行渲染。
一般来说，我喜欢内联，它仍然给你水平边距和填充，你可以做一个很好的 text-align: center;在 UL 上并使用 UL 作为垂直间距。
我倾向于纯粹使用浮点数，因为默认情况下 LI 是块元素，我认为应该这样对待，但两者都有明确的用例。
【讨论】：
这是个人喜好。
从 CSS 角度来看，Display:Inline = Float:Left(Right)。
当涉及到使元素水平时，例如<li>。
css 规则 Float 比 Display 更新。
【讨论】：