如何使用 CSS 將長列表分成多列？

使用CSS 將清單分成列

在多列中呈現又長又窄的清單可以增強網頁的可讀性並減少過度滾動的需要。本文探討了完成此任務的 CSS 技術。

CSS 多列解決方案

對於支援CSS 多列規範的現代瀏覽器，您可以使用以下內容屬性：

ul {
    column-count: 4;
    column-gap: 20px;
}

這會自動將清單分為四列，各列之間的間隙為20px

IE的JavaScript 後備

IE 9 及更早版本不支援多列佈局，因此需要JavaScript 後備：

1. 使用像Columnizer 這樣的jQuery 外掛程式(http:// welcome.totheinter.net/columnizer-jquery-plugin/)。
2. 實作手動回退解決方案，使用 float: left 並計算每個列表項目的正確寬度（如 http: //jsfiddle.net/NJ4Hw/)。

其他注意

• -moz- 和 -webkit- 前綴用於與舊版本的 Firefox 和 Safari 相容。
• 後備解決方案可能無法保留正確的順序在 IE 中列出項目。
• 考慮使用跨瀏覽器測試工具來確保不同瀏覽器之間的相容性瀏覽器。

以上是如何使用 CSS 將長列表分成多列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！