Многоуровневые списки

Списки уже стали неотъемлемой частью веб-дизайнов, основанных на веб-стандартах. Например, сейчас почти каждый сайт, свёрстанный полностью на CSS, использует списки для построения навигационного меню и различных вертикально структурированных ссылок. Это правильно и удобно. Теперь появился ещё один метод, позволяющий расширить возможности списков.

Как создать список в несколько столбцов, если весь арсенал — это тэги ul и li, плюс могучий CSS?

Нандини Доресвэми (Nandini Doreswamy) показал, что это совсем не сложно. Те, кто верстал многоколоночные CSS-дизайны, скажут, что почти невозможно обойтись без CSS-свойства float. Аналогично и со списками.

HTML код выглядит следующим образом:

<div id="div">

<p class="no-space">Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam.</p>

<ul class="left">
<li>Item 1: Left</li>
<li>Item 2: Left</li>
</ul>
<ul class="right">
<li>Item 3 Right: A long item</li>
<li>Item 4 Right: This is longer, just for
fun</li>
</ul>

<p class="no-space"> Duis aute irure dolor
in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat.</p>

<ul class="left">
<li>Item 1 Left: Varying length</li>
<li>Item 2 Left: This one varies in length,
too</li>

</ul>
<ul class="right">
<li>Item 3 Right: This is shorter</li>
<li>Item 4 Right: Right</li>
</ul>

<p class="no-space">Tellentesque et erat.
Quisque at quam. Donec accumsan tellus at tellus.
Donec  metus. Sed sit amet ante vitae metus
imperdiet varius.</p>

<ul class="left">
<li>Item 1 Left</li>
<li>Item 2 Left</li>
</ul>
<ul class="right">
<li>Item 3 Right: Another long item</li>
<li>Item 4 Right: Right</li>
</ul>

</div>

Теперь остается прописать в CSS-файле следующий код:

#div {width: 800px;}

ul.left {
float: left;
width: 400px;
margin: 0px;
padding: 15px 0px;
border: 0px none;
list-style-position: inside;
list-style-type: square;
position: relative;
left: 50px;
}

ul.right {
float: right;
width: 400px;
margin: 0px;
padding: 15px 0px;
border: 0px none;
list-style-position: inside;
list-style-type: square;
}

.no-space {
margin: 0px;
padding: 0px;
}

Все значения можно изменять, подстраивая их под собственные нужды.

Конечный результат можно просмотреть на сайте ALA. Там же опубликован оригинал статьи — Bulleted Lists: Multi-Layered Fudge.