如何防止 CSS 中的列表项出现分栏？

防止元素内的分栏

在 CSS 和响应式设计领域，通常需要确保特定元素在给定列中保持完整。考虑这个表示列表的 HTML 结构：

<div class='x'>
    <ul>
        <li>Number one</li>
        <li>Number two</li>
        <li>Number three</li>
        <li>Number four is a bit longer</li>
        <li>Number five</li>
    </ul>
</div>

现在，让我们应用一些 CSS 来创建多个列：

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

最初，Firefox 呈现如下：

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

很明显，第四项分为第二列和第三列。为了避免这种情况，break-inside CSS 属性可以帮助我们：

.x li {
    break-inside: avoid-column;
}

不幸的是，Firefox 目前缺乏对此属性的支持。因此，Firefox 需要替代解决方案。一种解决方法是将不间断的内容包装在表格中，尽管这不太理想。

更新：

Firefox 20 包括对内部分页的支持：避免作为防止列中断的机制。但是，以下代码表明它不能按列表的预期工作：

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

.x li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

以上是如何防止 CSS 中的列表项出现分栏？的详细内容。更多信息请关注PHP中文网其他相关文章！