Многоуровневые списки
За время всемирного активного изучения CSS, списки стали неотъемлемой частью веб-дизайнов, основанных на веб-стандартах. Например сейчас почти каждый сайт, полностью сверстанный на 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="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>