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 – 如何创建多列列表？