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

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Максим Никитин

27 июля 2009


Задача.

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

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

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

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

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

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
<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>