html css – 如何創建多列列表？

問題描述

我有一個”Ordered List”，它包含大約 100 個”List Items” 。這使我的頁面很長，用户必須滾動太多。

如何獲得 UL 這樣顯示：

1.           6.           11.
2.           7.           12.
3.           8.           13.
4.           9.           14.
5.          10.           15.

最佳解決方案

在完美的世界中，您可以使用 css3 column module，但遺憾的是，目前僅由 webkit 和壁虎瀏覽器 (使用-webkit 和-moz) 部分支持。

次佳解決方案

如果你不關心垂直順序，而是佈局：

1.      2.      3.       4.
5.      6.      7.       8.
9.      10.     11.      12.

你可以這樣簡單地設置 li 元素：

li {
    display: block;
    width: 25%;
    float: left;
}

應該工作如果您需要垂直排列，您需要在 php 腳本中將它們分割成單獨的 div，然後將其浮動。

第三種解決方案

有一個 an article on A List Apart 一回，正好涵蓋了這個問題。我想如果提到的是不夠的，那麼當然可以總是返回到 server-sided 編碼或 client-side 編碼，以自動將列表分成三部分。

第四種方案

我能夠通過一點點 jQuery 獲得正確的排序：

function splitList($list, n) {
    var i, k;
    var colHeight = Math.ceil($list.children().length / n)
    var colWidth = Math.floor(100 / n) + "%"

    for (i = 0; i < n; i++) {
        $list.append("<ul class='liCol'></ul>")
        for (k = 0; k < colHeight; k++) {
            $list.children("li").eq(0).appendTo(".liCol:last")
        }
    }

    $(".liCol").css("width", colWidth)
    $list.show() // list originally hidden to avoid displaying before ready
}

.liCol 的基本樣式：

.liCol {
    padding: 0px;
    margin: 0px;
    float: left;
}

第五種方案

我創建了一個解決方案，也適用於有序 (編號) 的列表。這些列表必須繼續對列進行編號。

將以下腳本添加到您的頁面 (無論在哪裏，最好的是在單獨的 js-file 中)：

<script type="text/javascript">
// As soon as the document's structure has been loaded:
document.addEventListener( "DOMContentLoaded", function() {
    // For each html elem:
    elems = document.getElementsByTagName("*"); // OL and UL wanted: chose all (*) here and select later.
    for ( var e = 0; e < elems.length; e++ ) {
        // Check if elem is a list (ordered/unordered) and has class name "cols":
        if ( ( elems[e].tagName == "OL" || elems[e].tagName == "UL" ) && elems[e].className.search("cols") > -1 ) {
            // Collect list items and number of columns (from the rel attribute):
            var list = elems[e];
            var listItems = list.getElementsByTagName("LI");
            var Ncols = list.getAttribute("rel")*1; // *1 converts rel from string to int.
            // Determine total number of items, items per column and column width:
            var Ntotal = listItems.length;
            var Npercol = Math.ceil( Ntotal/Ncols );
            var colWidth = Math.floor( 100/Ncols )+"%";
            // For each column:
            for ( var c = 0; c < Ncols; c++ ) {
                // Create column div:
                var colDiv = document.createElement("DIV");
                colDiv.style.cssFloat = "left";
                colDiv.style.width = colWidth;
                // Add list items to column div:
                var i_start = c*Npercol;
                var i_end = Math.min( (c+1)*Npercol, Ntotal );
                for ( var i = i_start; i < i_end; i++ )
                    colDiv.appendChild( listItems[0] ); // Using listItems[0] instead of listItems[i], because items are moved to colDiv!
                // Add column div to list:
                list.appendChild( colDiv );
            }
        }
    }
} );
</script>

那麼您可以簡單地創建如下這樣的多個列列表：

<ol class="cols" rel="3">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
</ol>

所以，設置 class = “cols” 和 rel = “[number_of_columns]”，腳本會做其餘的！

第六種方案

我今天早上有類似的問題，如果你只需要現代瀏覽器，你可以這樣做：

ul
{
    list-style-type: none;
    counter-reset: section;

    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

ul li
{
    padding-left: 30px;
    position: relative;
}

ul li:before
{
    counter-increment: section;
    content: counter(section) ".";
    margin: 0 0 0 -34px;
    text-align: right;
    width: 2em;
    display: inline-block;
    position: absolute;
    height: 100%;
}

jsfiddle

參考文獻

html css – how to create multiple column list?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

html css – 如何創建多列列表？