如何防止 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中文網其他相關文章！