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

Question Description:

I've got an unordered list of items, using a typical ul -> li structure. I applied column-count:3 to this ul (along with prefixes). It works beautifully in Firefox. In Chrome and IE11 (where it should work according to caniuse), it works mostly, but I'm running into an odd behavior. Take a look at the screenshots:

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

Firefox:

Chrome:

If you'll notice, the middle column is pushed down in Chrome (IE11 is identical). It appears that in those two cases the browser is attempting to make the first two column equal height. Is there a way to tell it to respect block items?

如果你注意到,中间列在Chrome中被按下(IE11是相同的)。在这两种情况下,浏览器似乎试图使前两列的高度相等。有没有办法告诉它尊重块项目?

---

Code:

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);
}

---

Working Example:

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

3 个解决方案

#1

On the first JSFiddle, I found adding to the li

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

display: inline-block;
width: 100%;

Worked to align the elements and fill the column width.

用于对齐元素并填充列宽。

Edit:

The above currently works in both Firefox and Chrome perfectly. On IE, I also have to set the li to box-sizing:border-box;, because specifying width while padding is specified causes an overflow otherwise. Link to updated version of the original Fiddle, now working in all major browsers:

以上目前适用于Firefox和Chrome。在IE上,我还必须将li设置为box-sizing:border-box;,因为指定padding时指定宽度会导致溢出。链接到原始Fiddle的更新版本,现在可以在所有主流浏览器中使用:

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

#2

This is not currently specified in the W3C spec on how to handle padding/margin breaking by default. FF seems to be avoiding breaking on the padding box while Chrome/IE are not. To get the intended behavior you're looking for, use break-inside: avoid.

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

Here is a JSFiddle with working in IE11, FF, and somewhat in Chrome (Chrome has a minor bug)

这是一个JSFiddle,工作在IE11,FF,有点在Chrome(Chrome有一个小错误)

Hope that helps!

希望有所帮助!

#3

The padding style on the li is adding extra padding to the bottom of the previous column which overflows into the next column, try: (http://jsfiddle.net/6cVqZ/1/)

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);
}

The only disadvantage to this is that your text is no longer aligned in the center, to fix this you can add a min-height of say 30px to the li

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