Как автоматически организовать список UL LI в несколько колонок?

Question

[weranda]

Приветствую.
Как можно сделать так, чтобы список UL LI был организован автоматически в несколько столбцов таким образом, чтобы каждый следующий элемент располагался под другим, а при достижении, к примеру, если имеется 30 записей и три столбца, 11 и 21 элемент списка располагались в следующем столбце?

В ручную создавать три списка UL нет смысла, так как он будет постоянно дополняться и постоянно переносить записи из одного столбца в - это заморочка.

Как надо:
1 11 21
2 12 22
3 13 23
4 14 24
5 15 25
6 16 26
7 17 27
8 18 28
9 19 29
10 20 30

Как не надо:
1 2 3
4 5 6
7 8 9
...
28 29 30

Comments

[Andrey Chursin]

ul может принимать параметры

columns: 3;
column-gap: 20px;

Answer 1

[Николай Громов]

вобще-то, это реализуемо средствами CSS: cssdeck.com/labs/full/xqivkd2k
поддержка в браузерах хорошая, а в Internet Explorer будет работать только начиная с 10й версии.

Answer 2

[Андрей Голуменов]

Из моего опыта: Одним списком дело не обойдется. Вам в любом случае придется формировать 3 списка, поскольку одним списком и средствами html+css такое сделать не получится.
Поэтому: Либо формируете 3 списка средствами php, либо отдаете на сайт один список и уже там формируете из этого списка 3 списка средствами javascript

Comments

[weranda]

Может подскажите как называются подобные скрипты и где их найти?

[Андрей Голуменов]

Я сам писал что-то подобное. Скриптов решающих вашу проблему не встречал, поскольку все это дело тривиально и узкоспецифично.
Приложите код, генерирующий список, может что-нибудь придумается

Answer 3

[Sowd]

Не шарю в программировании....
Но как насчет такого варианта?

<table>
<tr>
<td>
<ul>
<?
for ($i = 1; $i <= 10; $i++) {
    echo '<li>'. $i .'</li>';
}

?>
</ul>
</td>
<td>
<ul>
<?

for ($i = 11; $i <= 20; $i++) {
    echo '<li>'. $i .'</li>';
}


?>
</ul>
</td>
<td>
<ul>
<?

for ($i = 21; $i <= 30; $i++) {
    echo '<li>'. $i .'</li>';
}


?>
</ul>
</td>
</tr>
</table>

Answer 4

[vladkens]

ul { list-style-type: none; display: inline-block; padding: 8px; }

<?php

function generateListTable($cols, $rows) {
    $rs = '';
    for ($i = 0; $i < $cols; ++$i) {
        $rs .= '<ul>';
        for ($j = 0; $j < $rows; ++$j) {
            $rs .= '<li>' . ($i * $rows + $j) . '</li>';
        }
        $rs .= '</ul>';
    }
    
    return $rs;
}

echo generateListTable(3, 10);