Question

float: left或display: inline是否有最佳选择来横向对齐列表项？

例如：http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/

就我个人而言，我不喜欢float，但这可能更像是一种情感而非逻辑。

Answer 1

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注释来消除空白！虽然我更喜欢上面的方法。

   <ul><!--
    --><li><a href="http://www.facebook.com">Facebook</a></li><!--
    --><li><a href="httpt://www.google.com">Google</a></li><!--
--></ul>

Answer 2

怎么样？

li {
       display:inline-block
};

然后，您可以设置宽度，高度，填充，边距等属性。

Answer 3

在Chrome中显示LI的内联时，我注意到了一些渲染错误。我的LI边框有时无法用适当的水平填充渲染。

一般来说，我喜欢Inline，它仍然为你提供水平边距和填充，你可以做一个很好的text-align：center;在UL上使用UL进行垂直间距。

我倾向于纯粹使用float，因为默认情况下LI是一个块元素，在我看来应该这样处理，但两者都有明确的用例。

Answer 4

这是个人偏好。

从CSS点开始，Display:Inline = Float:Left(Right) 当涉及使元素水平时，如<li>。

css规则Float比Display更新。

li float vs display：inline

4 个答案: