Вот проблема, с которой я время от времени сталкиваюсь, и которую я обычно пытаюсь решить со спины конечной точки зрения, но хотелось бы знать, есть ли волшебное решение, которое другие нашли для решения этой проблемы во внешнем интерфейсе.
Учитывая список 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>
Как правило, это очень легко разместить элементы слева и отсортировать их визуально по горизонтали блоками, например:
Однако, чтобы получить столбцы, например:
I ' Мне всегда приходилось разбивать HTML на отдельные элементы, например, четыре отдельных элемента
в приведенном выше примере.
Есть ли способ сохранить все это в одном списке ul без дополнительной разметки , используя только CSS (без JavaScript), чтобы столбец выглядел, как на втором изображении выше? Думаю, «нет», но я видел некоторую магию раньше, и я хотел бы ответить на этот вопрос более определенно.