如何创建多列列表？

问题描述 投票：0回答：9

我有一个“有序列表”，其中包含大约 100 个“列表项”。这个 ol 使我的页面很长，用户必须滚动太多。

如何让 UL 显示如下：

1.           6.           11.
2.           7.           12.
3.           8.           13.
4.           9.           14.
5.          10.           15.
html css css-multicolumn-layout
9个回答
33
投票

如果您不关心垂直顺序，而只关心布局：

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

您可以这样简单地设置 li 元素：

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

应该可以。如果您需要将它们按垂直顺序排列，则需要在 php 脚本中将它们分成单独的 div，然后浮动它们。

20
投票

您可以使用CSS多列布局模块。您可以在Caniuse查看支持。

5
投票

我能够通过一点 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;
}
3
投票

如果你使用CSS多列布局，可以这样做：

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%;
}
<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

JSFiddle 演示

1
投票

我创建了一个也适用于有序（编号）列表的解决方案。这些列表必须继续按列编号。

将以下脚本添加到您的页面（无论在哪里，最好是在单独的 js 文件中）：

<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]" 脚本将完成剩下的工作！

0
投票

您可以使用 2D 转换：现代浏览器比 CSS3 列更支持它们。在这里查看我的回答

水平 div 内的 2 行元素布局

0
投票

对于任何寻求更新答案的人，我们现在可以使用 Flexbox 来制作包含多列的垂直列表。

HTML 像往常一样使用 

<ol>
和 
<li>
。

在 CSS 中，

ol {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: __px;
}

高度是这里的关键，您需要设置高度以确保列表在列表中的适当位置换行。例如，如果您有 100 个项目并需要 5 列，则您希望高度适合 20 行项目。

此外，您还可以在 CSS 中添加 

column-gap
属性来调整列之间的间距。

-1
投票

由于我遇到了同样的问题并且找不到任何“干净”的东西，我想我已经发布了我的解决方案。在此示例中，我使用反向 

while
循环，因此我可以使用 
splice
而不是 
slice
。现在的优点是 splice() 只需要一个索引和一个范围，而 slice() 需要一个索引和总计。后者在循环时往往会变得困难。

缺点是我需要在追加时反转堆栈。

示例：

列= 4； 里计数 = 35

for 循环，切片 = [0, 9]; [9, 18]； [18, 27]； [27, 35]

当 splice = [27, 8] 时反转； [18, 9]; [9, 9]; [0, 9]

代码：

// @param (list): a jquery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
    var children = list.children(),
        target = list.parent(),
        liCount = children.length,
        newUl = $("<ul />").addClass(list.prop("class")),
        newItems,
        avg = Math.floor(liCount / cols),
        rest = liCount % cols,
        take,
        stack = [];

    while (cols--) {
        take = rest > cols ? (avg + 1) : avg;
        liCount -= take;

        newItems = children.splice(liCount, take);
        stack.push(newUl.clone().append(newItems));
    }

    target.append(stack.reverse());
    list.remove();
}
-1
投票

所以我研究了这个问题并找到了一个适用于所有浏览器的解决方案。

我的 HTML 列表：

<ol class="list-items">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li class="second-list">Item5</li>
    <li class="second-list">Item6</li>
    <li class="second-list">Item7</li>
    <li class="second-list">Item8</li>
</ol>

注意，我给了最后 4 个列表项一个第二列表类，这对我们的 jQuery 很重要。

接下来，在我的网页上，我在第二列中创建了一个带有 secondary-list-appender 类的 div，我希望第二个列表位于该列中。

var secondListStart = $(".list-items").children().length - 3;

$(".second-list-appender").append($("<ol start=" + secondListStart + ">"));
$(".second-list-appender ol").append($(".second-list"));
$(".second-list-appender").append($("</ol>"));

看，我实际上从 1 个列表中创建了 2 个列表，但通过在第二个列表的开头给出前一个列表的下一个编号，使其看起来像 2 列中的一个列表。

我用 2 列完成了它，但您可以重复此过程，或者创建一个函数并在循环中调用它，根据您想要重复的次数。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.