Question

我正在尝试列出具有可变高度的项目列表。当我尝试制作一个整齐的列表，其中的项目在水平行中对齐时，当列表项都具有相同的高度时，一切顺利。当一个或多个物品的高度更高时，它会出错。我创建了一个JSFiddle来非常清楚地显示问题。任何人都可以帮助我吗？

http://jsfiddle.net/NNLDn/

我的HTML：

<div>
    <ol>
        <li></li>
        <li></li>
        <li style="height: 140px;"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>

我的css：

div {
    width: 730px;
}

ol {
    width 730px;
    margin-left: -40px;
}

ol li {
    display: block;
    width: 167px;
    height: 120px;
    margin: 0 0 15px 15px;

    background:red;
    float: left;
}

Answer 1

您应该考虑使用display:inline-block而不是float:left，然后您还可以使用vertical-align进行元素的垂直对齐。

Answer 2

我知道唯一的css解决方案，如果你知道每行li项的数量，就是将每行包含在div中，然后浮动这些div。这样每个div都会自动调整到最高li的高度，并且浮动的li都不会被“挂起”

div div { float: left; clear: both; }

http://jsfiddle.net/NNLDn/1/

Answer 3

我现在无法轻易检查，因为我在手机中，但我认为您需要使用display:inline-block而不是使用float

列表项不能垂直对齐

3 个答案: