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

Question

问题描述:

我有一个无序的项目列表,使用典型的ul- > 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;,因为指定widthwhile padding指定会导致溢出.链接到原始小提琴的更新版本,现在可以在所有主流浏览器中使用:

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