HTML CSS - как создать список из нескольких столбцов?

Question

У меня есть «Упорядоченный список», который содержит около 100 «элементов списка». Эта ол делает мою страницу очень длинной, и пользователям приходится слишком много прокручивать.

Как мне заставить 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;
}

Answer 5

У меня была похожая проблема сегодня утром, если вам нужны только современные браузеры, вы можете сделать это следующим образом:

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

Answer 6

Я создал решение, которое также работает для упорядоченных (нумерованных) списков. Эти списки должны продолжать нумерацию через столбцы.

Добавьте следующий скрипт на свою страницу (где бы ни было, лучше всего в отдельном 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]", скрипт сделает все остальное!

Answer 7

Вы можете использовать 2D-преобразования: они имеют более широкую поддержку в современном браузере, чем колонки CSS3. Смотрите мой ответ здесь

Расположение элементов в 2 ряда в пределах горизонтального деления

Answer 8

Итак, я посмотрел на это и нашел решение, которое будет работать для всех браузеров.

Мой список 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 элементам списка класс second-list, это важно для нашего jQuery.

Затем на своей веб-странице я сделал div с классом second-list-appender во втором столбце, столбце, в котором я хочу, чтобы мой второй список был.

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>"));

Видите, я фактически делаю 2 списка из 1, но выгляжу как один список из 2 столбцов, давая началу второго списка следующий номер предыдущего списка.

Я сделал это с 2 столбцами, но вы можете просто повторить этот процесс или создать функцию и вызывать ее в цикле, сколько раз вы хотите повторить ее.

Надеюсь, что это все еще может помочь.

Answer 9

Поскольку у меня была та же проблема, и я не мог найти ничего «чистого», я подумал, что выложил свое решение. В этом примере я использую обратный цикл while, поэтому я могу использовать splice вместо slice. Преимущество теперь в том, что splice () нужен только индекс и диапазон, где slice () нужен индекс и общее количество. Последний имеет тенденцию становиться трудным, зацикливаясь.

Недостатком является то, что мне нужно перевернуть стек при добавлении.

Пример:

кол = 4; liCount = 35

для цикла со срезом = [0, 9]; [9, 18]; [18, 27]; [27, 35]

в обратном направлении при соединении = [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();
}