CSS 将 <li> 水平分布在 <ul> 上答案

【问题标题】：CSS spread <li> horizontally across <ul>CSS 将 <li> 水平分布在 <ul> 上
【发布时间】：2011-08-20 10:56:27
【问题描述】：

我正在尝试使用float:left 将<li> 水平对齐的列表传播到我的<ul>。

有人知道这是怎么做到的吗？

【问题讨论】：

float: left; 听起来不错。到目前为止，你有什么 HTML/CSS？
@Tomalak 我实际上是在尝试将它们平均分配，例如无论内容如何，它们都将具有相同的宽度，加起来就是
最佳答案：stackoverflow.com/a/11466521/104380

标签： css html-lists

【解决方案1】：

有什么原因不能将它们设置为display: inline;（或inline-block）吗？例如：

http://jsfiddle.net/TKmR5/

【讨论】：

内联显示在项目之间创建了一个尴尬的空间，它也不允许设置宽度或高度。
然后改用inline-block！ “项目之间的尴尬空间”是由于未重新设置边距和填充...
我自己也能想出类似的东西，但这不是我想要的。我想要不同尺寸的物品，但分布在一定的宽度上。

【解决方案2】：

答案是在<ul> 元素上使用display: table;，在<li> 元素上使用display: table-cell;。

【讨论】：

哇这么久了都不知道。谢谢！
这不起作用，有兴趣查看 codepen 或 fiddle 以了解样式中添加了哪些其他内容以使其以这种方式工作。

【解决方案3】：

向左浮动并将ul 的宽度除以lis 的数量，我认为这就是您所追求的。看看这里：http://jsfiddle.net/b2nsW/

HTML：

<ul>
    <li>item</li>
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
</ul>

CSS：

ul {
    width: 250px;
    background: red;
    padding: 0;
    margin: 0;
    overflow: auto;
}

li {
    width: 20%;
    float: left;
    background: green;
    margin: 2.5%;
}

【讨论】：

工作，但只有在您有固定数量的菜单项时才有用。但客户可以通过 CMS 添加更多菜单项。

【解决方案4】：

您可以使用display: inline-block;，它适用于现代浏览器。

示例：http://jsfiddle.net/joar/ELpDD/

正如 feela 在 cmets 中对 #7131346 所说的，

[...] “项目之间的尴尬空间”是由于未重新设置边距和填充...

【讨论】：

【解决方案5】：

li {
    display: inline-block;
}

ul{
    text-align: center;
}

然后调整 li 元素的内边距或外边距，使它们在 ul 中分布得更少或更多。

【讨论】：