如何使用 CSS 建立多列清單並處理 Internet Explorer 相容性？

使用 CSS 從清單建立欄位

您的網頁具有過度滾動的冗長清單。為了提高可讀性，您希望在多列中顯示此列表，而不需要隨著列表的增長而進行大量手動調整。

CSS 提供了一個簡單的解決方案：

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

此 CSS 程式碼確保清單將分為四列，它們之間的間隙為 20 像素。

跨瀏覽器相容性

用於建立列的 CSS 解決方案在除 Internet Explorer 9 及更早版本之外的瀏覽器中廣泛支援。

Internet Explorer 的替代方案

如果您需要Internet Explorer 相容性，您可以考慮JavaScript 替代品，例如Columnizer jQuery

Internet Explorer 的後備浮動

專門針對Internet Explorer的替代方案是使用浮動後備。這可能會導致項目順序不正確，但視覺外觀將相似：

li {
    width: 25%;
    float: left
}

如果項目中已存在，您可以使用 Modernizr 選擇性地應用此後備。

以上是如何使用 CSS 建立多列清單並處理 Internet Explorer 相容性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！