html css - 如何创建多列列表？

Question

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

如何让UL显示如下:

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

Answer 1

如果你不关心垂直顺序,而只关心布局:

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

你可以这样简单地设置li元素:

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

它应该工作.如果你需要让他们在垂直顺序,你需要在PHP脚本将它们划分为单独的div采取行动,然后把它们飘浮.

Answer 2

在完美的世界中,你可以使用css3列模块,但遗憾的是它目前仅部分支持webkit和gecko浏览器(使用-webkit和-moz).

Answer 3

A List Apart上有一篇关于这个问题的文章.我想如果提到的内容还不够,你当然可以总是恢复到服务器端编码或客户端编码,以便分三个部分自动划分列表.

Answer 4

我能够通过一个小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;
}