Компания

Инвентарь

Наше все

Ководство

Техногрет

Список, разбитый на колонки

HTML и CSS XSLT JavaScript Изображения Софт Etc

	Задача.	Разбить список на колонки.

Самый простой способ — достучаться CSS-селектором до каждой колонки отдельно с помощью :nth-child(n), но количество селекторов будет расти с количеством колонок. К тому же, это решение не подходит для старых браузеров. Поэтому используем display:inline-block и vertical-align:top для <li>, а для IE, как всегда, «частное решение».

Недостатки. В браузерах, которые не понимают inline-block можно пройти по ссылке, кликнув на пустую область.

Примечание. Решение актуально, когда нет возможности менять HTML-код.

Как это выглядит в браузере

Список, разбитый на колонки
Описание и перечень возможных значений свойства display в CSS (в том числе и специфичные значения display для firefox'а)
Спецификация псевдо-класса nth-child на W3C
Спецификация свойства word–spacing на W3C

<style type="text/css">
ul.columns { margin: 0; padding: 0; list-style-type: none; word-spacing: -1ex; }
/* 
    Firefox ниже версии 3 не знает о inline-block.
    Поэтому указываем для него -moz-inline-stack
*/
.columns li { display: -moz-inline-stack; display: inline-block; //display: inline; }
/*
    Чтобы ссылки не нажимались кликом
    по пустому месту, применим фильтр
*/
.columns a, .columns b { display: inline; word-spacing: normal; //display: inline-block; //filter: alpha(opacity=100); }
.columns a, .columns b, x:-moz-any-link { display:block; }
/*
    Если Firefox выше 2.0, Возвращаем a и b в inline
*/
.columns a, .columns b, x:-moz-any-link, x:default { display: inline; }
.columns li, .columns a, .columns b { vertical-align: top; }

/* customize */
.columns li { margin: 0 10% 0.4em 0; //margin: 0; width: 40%; //width: auto; }
.columns a, .columns b { //margin: 0 10% 0.4em 0; //width: 40%; }
.columns ul { width: 100%; }
</style>
<ul class="columns">
    <li><b>Список, разбитый на&nbsp;колонки</b></li>
    <li><a href="https://developer.mozilla.org/en/CSS/display">Описание и&nbsp;перечень возможных значений свойства display в&nbsp;CSS (в&nbsp;том числе и&nbsp;специфичные значения display для&nbsp;firefox'а)</a></li>
    <li><a href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#nth-child-pseudo">Спецификация <nobr>псевдо-класса</nobr> <nobr>nth-child</nobr> на&nbsp;W3C</a></li>
    <li><a href="http://www.w3.org/TR/CSS21/text.html#propdef-word-spacing">Спецификация свойства  <nobr>word&ndash;spacing</nobr> на&nbsp;W3C</a></li>
</ul>