css - 多列布局中的 block 元素 - Chrome/IE 中的填充问题

Question

问题描述:

我有一个无序列表，使用典型的 ul -> li 结构。我将 column-count:3 应用于这个 ul (连同前缀)。它在 Firefox 中运行良好。在 Chrome 和 IE11 中(它应该根据 caniuse 工作)，它主要工作，但我遇到了一个奇怪的行为。看看截图:

火狐:

Chrome :

如果您注意到，中间列在 Chrome 中被向下推(IE11 相同)。在这两种情况下，浏览器似乎试图使前两列的高度相等。有没有办法告诉它尊重 block 元素？

---

代码:

HTML:

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    ...
    <li>List Item 20</li>
</ul>

CSS:

ul {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3;
}

ul li {
    display:block;
    list-style-type:none;
    padding:10px;
    margin-bottom:10px;
    border-left:solid 4px rgb(205,88,5);
    background-color:rgba(0,0,0,0.1);
}

---

工作示例:

JSFiddle: http://jsfiddle.net/6cVqZ/

Answer 1

在第一个 JSFiddle 上，我发现添加到 li

display: inline-block;
width: 100%;

致力于对齐元素并填充列宽。

编辑:

以上内容目前在 Firefox 和 Chrome 中都可以完美运行。在 IE 上，我还必须设置 li至box-sizing:border-box; , 因为指定 width而padding指定否则会导致溢出。链接到原始 Fiddle 的更新版本，现在可以在所有主要浏览器中使用:

http://jsfiddle.net/6cVqZ/40/