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

Question

问题描述：

我有一个无序的项目列表，使用典型的ul - ＆gt; li结构。我将column-count:3应用于此ul（以及前缀）。它在Firefox中运行得很漂亮。在Chrome和IE11中（它应该根据caniuse工作），它主要起作用，但我遇到了奇怪的行为。看一下屏幕截图：

火狐：

铬：

如果您注意到，则在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/

Answer 2

默认情况下，W3C spec中未指定如何处理填充/边距中断。 FF似乎是避免打破填充框而Chrome / IE不是。要获得您正在寻找的预期行为，请使用break-inside: avoid。

这是JSFiddle with working in IE11, FF, and somewhat in Chrome（Chrome有一个小错误）

希望有所帮助！

Answer 3

li上的填充样式是在前一列的底部添加额外的填充，溢出到下一列，尝试： （http://jsfiddle.net/6cVqZ/1/）

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

唯一的缺点是你的文字不再在中心对齐，为了解决这个问题，你可以为li添加一个30px的最小高度