html - 列表项未正确垂直对齐

Question

我正在尝试列出具有可变高度的项目。当我尝试用水平行对齐的项目制作一个整洁的列表时，当列表项目都具有相同的高度时，一切都会很好。当 1 个或多个项目的高度更大时，它会出错。我创建了一个 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 的高度，并且没有一个浮动lis 会“挂起”

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

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

Answer 3

我现在不能很容易地仔细检查，因为我在我的手机里，但我认为你需要使用display:inline-block而不是使用float