CSS 将 <li> 水平分布在 <ul> 上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7131310/
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
CSS spread <li> horizontally across <ul>
提问by CookieMonster
I'm trying to spread a list of <li>'s aligned horizontally using float:leftacross my <ul>.
我试图传播的名单<li>“使用S水平排列float:left在我的<ul>。
Does anyone have any idea how this is done?
有谁知道这是如何完成的？
回答by aroth
Is there some reason why you can't just set them to display: inline;(or inline-block)? For example:
有什么理由不能将它们设置为display: inline;（或inline-block）吗？例如：
回答by CookieMonster
The answer is to use display: table;on the <ul>element and display: table-cell;on the <li>elements.
答案是使用display: table;上的<ul>元素，并display: table-cell;在<li>元素。
回答by programmingmusic
li {
display: inline-block;
}
ul{
text-align: center;
}
Then adjust the padding or margins of the li elements to spread them across less or more across the ul.
然后调整 li 元素的内边距或边距，使它们在 ul 上或多或少地分布。
回答by Bazzz
Float left and divide the width of the ulover de number of lis I think is what you are after. Have a look here: http://jsfiddle.net/b2nsW/
浮法左右分割的宽度ul超过日数li的I认为这是你所追求的。看看这里：http: //jsfiddle.net/b2nsW/
HTML:
HTML：
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
CSS:
CSS：
ul {
width: 250px;
background: red;
padding: 0;
margin: 0;
overflow: auto;
}
li {
width: 20%;
float: left;
background: green;
margin: 2.5%;
}
回答by joar
You can use display: inline-block;it works in modern browsers.
您可以display: inline-block;在现代浏览器中使用它。
Example: http://jsfiddle.net/joar/ELpDD/
示例：http: //jsfiddle.net/joar/ELpDD/
As feela said in the comments to #7131346,
[…] "awkward space between items" is caused by not re-setting margins and paddings…
[...]“项目之间的尴尬空间”是由于没有重新设置边距和填充...
