如何使用 CSS 建立多列列表？

使用CSS 在列中呈現列表

如果您有一個包含簡短項目的冗長列表，想要以更緊湊的格式顯示，考慮將其分成幾列。 CSS 為此提供了一個簡單的解決方案。

CSS 多列版面配置

CSS 多列版面配置模組可讓您指定要在一個版面配置中建立的列數。元素。應用方法如下：

ul {
    column-count: 4;  /* The number of columns */
    column-gap: 20px; /* Space between columns */
}

此程式碼將以四列呈現列表，各列之間有 20 像素的間隙。

瀏覽器支援

CSS 多列佈局受除Internet Explorer 9 或之外的所有現代瀏覽器支援

Internet Explorer的替代品

如果您需要Internet Explorer 支持，可以使用JavaScript 解決方案，例如Columnizer jQuery 外掛。

Internet Explorer 回退到 Float

作為Fallback，您可以使用 CSS float 在 Internet Explorer 中實現類似的佈局。但是，此方法將保留項目的順序，但不會保留列結構。

li {
    width: 25%;
    float: left
}

注意：此回退可以與 Modernizr 或類似的條件加載技術一起使用，以僅針對 Internet Explorer .

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