Сортировка списка html ul / li в алфавитных вертикальных блоках

Вот проблема, с которой я время от времени сталкиваюсь, и которую я обычно пытаюсь решить со спины конечной точки зрения, но хотелось бы знать, есть ли волшебное решение, которое другие нашли для решения этой проблемы во внешнем интерфейсе.

Учитывая список ul / li, представленный в разметке в алфавитном порядке, от az:

<ul>
    <li>Alpha</li>
    <li>Bravo</li>
    <li>Charlie</li>
    <li>Delta</li>
    <li>Echo</li>
    <li>Foxtrot</li>
    <li>Golf</li>
    <li>Hotel</li>
    <li>India</li>
    <li>Juliet</li>
    <li>Kilo</li>
    <li>Lima</li>
    <li>Mike</li>
    <li>November</li>
    <li>Oscar</li>
    <li>Papa</li>
    <li>Quebec</li>
    <li>Romeo</li>
    <li>Sierra</li>
    <li>Tango</li>
    <li>Uniform</li>
    <li>Victor</li>
    <li>Whiskey</li>
    <li>X-ray</li>
    <li>Yankee</li>
    <li>Zulu</li>
</ul>

Как правило, это очень легко разместить элементы слева и отсортировать их визуально по горизонтали блоками, например:

One UL/LI list with the li elements floated left

Однако, чтобы получить столбцы, например:

Four UL/LI lists with the ul elements floated left

I ' Мне всегда приходилось разбивать HTML на отдельные элементы, например, четыре отдельных элемента

    в приведенном выше примере.

    Есть ли способ сохранить все это в одном списке ul без дополнительной разметки , используя только CSS (без JavaScript), чтобы столбец выглядел, как на втором изображении выше? Думаю, «нет», но я видел некоторую магию раньше, и я хотел бы ответить на этот вопрос более определенно.

7
задан tshepang 24 May 2015 в 21:54
поделиться