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

【问题标题】：Block Elements Inside Multicolumn Layout - Padding Issue In Chrome/IE多列布局中的块元素 - Chrome/IE 中的填充问题
【发布时间】：2014-05-19 18:50:22
【问题描述】：

问题描述：

我有一个无序列表，使用典型的 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/

【问题讨论】：

标签： css cross-browser multiple-columns

【解决方案1】：

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

display: inline-block;
width: 100%;

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

编辑：

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

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

【讨论】：

谢谢，这帮助了我在 Chrome 中遇到类似奇怪的多列问题的类似情况。
谢谢，这很有帮助！

【解决方案2】：

这在W3C spec 中目前没有指定如何默认处理填充/边距中断。 FF 似乎在避免破坏填充框，而 Chrome/IE 则没有。要获得您正在寻找的预期行为，请使用break-inside: avoid。

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

希望有帮助！

【讨论】：

我猜没有人考虑在分成列的包装器中使用块元素。我最终使用了一个小的 javascript 来检查列表中有多少 li 项目，并基于此设置整个包装器的 height。性能并不可怕，因为我提前知道每个li 的高度。不过，我会将您的答案标记为答案，因为它至少可以解决 IE11 上的问题，如果不是 Chrome 的话。如果您发现 Chrome 中的某些更改有效，请回来并在此处提及。谢谢！
我确实为此打开了一个针对他们的错误，因此至少您可以希望有一个不需要 JS 的解决方法。一旦他们的错误得到修复，或者我们找到不同的互操作解决方案，我会更新这个。谢谢！！ code.google.com/p/chromium/issues/detail?id=393966
我将答案切换到 Jan vH，因为他使用 inline-block 的方法目前适用于所有主流浏览器，而 break-inside 似乎没有任何效果。感谢您的回答和研究。
这不再修复 Chrome (45)。但是，如果您添加 -webkit-column-break-inside: Avoid;，则可以解决此问题。这是更新的jsFiddle。（如果你更新你的答案，我会投赞成票。）

【解决方案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 的最小高度

【讨论】：

不幸的是，当我添加 height 或 min-height 时，Chrome 会显示它与 padding 相同。
你有没有像上面的代码那样分离出填充样式（填充：10px 10px 0 10px）？