无序列表清除修复答案

【问题标题】：Unordered List Clearfix无序列表清除修复
【发布时间】：2012-06-22 02:27:28
【问题描述】：

我有一个无序列表，每个列表元素都包含一张照片和一个标题。我的 CSS 将网格设置为网格，其中每行包含三张照片。有时标题（或照片说明）比照片的宽度长，并且必须跨越两行。在某些情况下，当文本跨越 2 行以上时，它下面的列表元素会被推到右侧，并且列表中有很大的间隙。唯一对我有用的解决方法是在每三个 <li></li> 元素之后添加以下 HTML <div style="clear:both"></div>。该问题可以在列表元素的第三行中看到。我试过研究这个问题，但还没有找到纯 CSS 的方法。在我的示例代码中，我应用了 CSS clearfix 类，但它似乎没有任何效果。

我使用的是最新版本的谷歌浏览器。

这是我的代码：http://jsfiddle.net/NVveP/1/

【问题讨论】：

这样好吗？ jsfiddle.net/thirtydot/NVveP/2。如果需要，我明天会写一个实际的答案。
是的，效果很好。谢谢！这个无序列表包含在一个 div 中。在我原来的布局中，div 是向左浮动的，所以列表也必须向左浮动。从那时起，我决定将布局更改为非浮动 div，这就是为什么删除“float: left”css 属性可以解决我的问题。如果我保持原来的布局并且列表需要浮动，那么解决方案是什么？
"在我的原始布局中，div 是向左浮动的，所以列表也必须向左浮动。" - 列表不需要浮动。浮动元素（例如外部div）将包含其他浮动元素。如果您随后将外部div 更改为不浮动，则必须以其他方式包含浮动，例如将clearfix 类添加到外部div。

标签： html css css-float html-lists clearfix

【解决方案1】：

同时拥有float: left 和display: inline-block 将使display: inline-block 无效，因为float: left forces display: block。

因此，删除float: left 允许display: inline-block 工作，结合vertical-align: top 是您可以实现所需布局的方法。

见：http://jsfiddle.net/thirtydot/NVveP/3/

如果这很重要，我还添加了一个 hack 以使 display: inline-block 在 IE7 中工作。

使用浮点数会更难做到这一点。您需要以下效果：

li:nth-child(3n+1) {
    clear: both;
}

哪个有IE7/8等老浏览器不工作的问题。幸运的是，无需担心这一点，因为display: inline-block 是这里的解决方案，而不是浮动。

【讨论】：