Question

我正在尝试使用<li>在float:left上展开<ul>水平对齐的列表。

有没有人知道如何做到这一点？

Answer 1

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

http://jsfiddle.net/TKmR5/

Answer 2

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

Answer 3

向左浮动并将ul的宽度除以li的数量，我认为这就是你所追求的。看看这里：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%;
}

Answer 4

您可以使用display: inline-block;它可以在现代浏览器中使用。

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

费索在对#7131346的评论中说，

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

Answer 5

li {
    display: inline-block;
}

ul{
    text-align: center;
}

然后调整li元素的填充或边距，以便在ul中越过或越过它们。

CSS在<ul> </ul> </li>中水平传播<li>

5 个答案: