Главная > Tips and Tricks, CSS/Style Sheets > Списки в несколько колонок при использовании единого «ul»

Списки в несколько колонок при использовании единого «ul»


3 февраля 2011, 13:05. Разместил: Mysterious Master
Списки в несколько колонок при использовании единого «ul»

Давайте пройдемся по быстрому и простому тексту, рассказывающему о создании списков в несколько колонок при использовании единого «ul». В таких случаях, когда вам надо, чтобы несколько списков шли друг за другом, это реализуется с помощью верстки типа «ul class="col"». Тем не менее, посредством придания спискам параметра плавающего элемента с выравниванием по левому краю и установки их ширины на корректное процентное соотношение (две колонки = li{width:50%;} и так далее), вы можете добиться нужного эффекта в два счета.

Посмотреть демо

Здесь трюк заключается в том, чтобы принудить список преломляться с правой стороны. Если вам нужны две колонки, вам надо задать списку параметр плавающего элемента с выравниванием по левому краю и установить ширину на 50%. Если нужно больше колонок, то высчитывайте процентное соотношение. Например, три колонки = ширина 33%, 4 колонки = ширина 25% и так далее.

Код

Как разметка, так и CSS крайне просты. Ничего сверхъестественного, никакого CSS3, лишь чуточка стилей.

Разметка

Разметка здесь заключается лишь в одном «ul»:

<ul id="double"> <!-- Alter ID accordingly -->
  <li>CSS</li>
  <li>XHTML</li>
  <li>Semantics</li>
  <li>Accessibility</li>
  <li>Usability</li>
  <li>Web Standards</li>
  <li>PHP</li>
  <li>Typography</li>
  <li>Grids</li>
  <li>CSS3</li>
  <li>HTML5</li>
  <li>UI</li>
</ul>

CSS

ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
#double li  { width:50%;} /* 2 col */
#triple li  { width:33.333%; } /* 3 col */
#quad li    { width:25%; } /* 4 col */
#six li     { width:16.666%; } /* 6 col */

Когда следует это использовать

Данный метод должен быть использовать только тогда, когда в списке нет конкретной сортировки пунктов, а разметка написана линейно и список отображен в виде матрицы. Как видно, посетитель будет просматривать списки в виде: строка-вниз-строка или вниз-вверх-вниз. Это означает, что то, как вы располагаете содержимое – не столь важно, так как информация все равно будет прочитана. В нашем примере нет никаких проблем, и все содержимое может быть прочитано в любом порядке.
Вернуться назад