CSS li float vs display: inline
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8970650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
li float vs display: inline
提问by Jamie Kitson
Is there a best choice out of float: leftor display: inlinefor aligning list items horizontally?
是否有一个最佳的选择出来的float: left或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/
Personally I dislike float, but that maybe more of an emotional thing rather than logical.
就我个人而言，我不喜欢float，但这可能更多是一种情绪化的东西，而不是合乎逻辑的东西。
回答by Savas Vedova
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>
This is what I prefer mostly because when you use display:inlineyou cannot set properties like width, padding (top and bottom), margin etc... which is an handicap for layout purposes.
这是我最喜欢的，因为当您使用时，display:inline您无法设置宽度、填充（顶部和底部）、边距等属性...这是布局目的的障碍。
EDIT 2014
编辑 2014
It is also an option to use the display: inline-blockproperty. One think to note is that once you make the list elements inline or inline-block, white-spaces will be taken into consideration. Hence, there will be unwanted spaces between elements.
这也是使用该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; }
Check the fiddlehere.
检查小提琴here。
If you don't want to use the font-sizeproperty (for browser compatibility issues), you can also use html comments to get rid off whitespaces! Though I prefer the method above.
如果您不想使用该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>
回答by Chris Pesoa
What about
关于什么
li {
display:inline-block
};
You can then set properties like width, heigth, padding, margin, etc..
然后，您可以设置宽度、高度、填充、边距等属性。
回答by user2708862
I have noticed some rendering bugs when displaying LI's Inline in chrome. My LI border sometimes does not render with the proper horizontal padding.
在 chrome 中显示 LI 的 Inline 时，我注意到了一些渲染错误。我的 LI 边框有时无法使用适当的水平填充进行渲染。
In general though, I like Inline, it still gives you horizontal margining and padding and you can do a nice text-align: center; on the UL and use the UL for vertical spacing.
不过总的来说，我喜欢内联，它仍然为您提供水平边距和填充，您可以做一个很好的 text-align: center; 在 UL 上并使用 UL 表示垂直间距。
I tend to use float purely because an LI is a block element by default and should be treated that way in my opinion but there are clear use cases for both.
我倾向于使用 float 纯粹是因为 LI 在默认情况下是一个块元素，我认为应该以这种方式对待，但两者都有明确的用例。
回答by Scott
It's personal preference.
这是个人喜好。
From a CSS point, Display:Inline= Float:Left(Right).
When it comes to making elements horizontal, like <li>.
从 CSS 的角度来看，Display:Inline= Float:Left(Right)。
当涉及使元素水平时，例如<li>.
The css rule Float is newer than Display.
css 规则 Float 比 Display 新。
