Alex Rivera | Logout

How to create a multi-column list?

Asked 2010-02-27T10:57:02.660
47

I have an "Ordered List" which contains about 100 "List Items". This ol makes my page very long and users have to scroll too much.

How can I get the UL to show like this:

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

1 Answer

5

I was able to get the proper ordering with a little 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
}

basic styles for .liCol:

.liCol {
    padding: 0px;
    margin: 0px;
    float: left;
}
answered 2011-03-10T20:58:17.610

Your Answer