—»     —»   Списки в несколько колонок при использовании единого «ul»
  Раздел: Tips and Tricks, CSS/Style Sheets   Комментариев: 1  

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



Списки в несколько колонок при использовании единого «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 */

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

Данный метод должен быть использовать только тогда, когда в списке нет конкретной сортировки пунктов, а разметка написана линейно и список отображен в виде матрицы. Как видно, посетитель будет просматривать списки в виде: строка-вниз-строка или вниз-вверх-вниз. Это означает, что то, как вы располагаете содержимое – не столь важно, так как информация все равно будет прочитана. В нашем примере нет никаких проблем, и все содержимое может быть прочитано в любом порядке.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 25561   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 6 февраля 2011 @ 21:30
Написал: Михаил — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
проще jQuery columnizer
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31