Списки HTML

29 марта 2014

Список является простейшим способом группирования однородных элементов.

Списки бывают:

1. нумерованные
2. маркированные
3. списки определений

Нумерованные списки

Заключаются в теги <ol></ol>.

Сторки списка выводятся в теге <li> (как в нумерованных, так и маркированных)

<!--- маркированный список --->
<ol>
  <li>Нумерованный</li>
  <li>Маркированный</li>
  <li>Списки определений</li>
</ol> 
 

Тег ol может применяться с атрибутом start="значение", тогда нумерация списка будет начинаться с заданного значения.

Если необходимо изменить номер определенного элемента списка и следующих за ним элементов, то тег li применяют с атрибутом value="значение".

Можно задавать стиль отображения упорядоченного списка, задавая средствами CSS то или иное значение свойству list-style-type Его можно применять как ко всему списку, так и к отдельным пунктам li. На практике допускается использование вместо него универсального свойства list-style.

<!--- атрибуты start, value и стиль отображения списка --->
<ol start="4" style="list-style-type: upper-roman;">
  <li>Нумерация начинается с 4</li>
  <li value="8">Меняем номер на 8</li>
  <li>Последующие номера меняются автоматически</li>
</ol> 
 

4. Нумерация начинается с 4
8. Меняем номер на 8
9. Последующие номера меняются автоматически

Наиболее часто используемые значения свойства list-style-type:

decimal - обычные числа (по умолчанию)
upper-alpha - заглавные латинские буквы
lower-alpha - строчные латинские буквы
upper-roman - римские числа

Маркированные списки

Заключаются между тегами <ul></ul>

<!--- неупорядоченный список --->
<ul>
  <li>пункт 1</li>
  <li>пункт 2</li>
  <li>пункт 3</li>
</ul> 
 

Обычный маркированный список, внешний вид которого определяется значениями по умолчанию Вашего браузера

• пункт 1
• пункт 2
• пункт 3

Вы можете изменить вид маркеров как всего списка, так и отдельных пунктов с помощью свойства list-style-type:

circle - кружок
disc - жирная точка
square - квадрат
none - без маркера

Для добавления своих маркеров используют свойство list-style-image,  но пользуются им редко, потому что сложно позиционировать изображение маркера. Легче в качестве маркера использовать фоновое изображение для тегов li.

Списки определений

Заключаются между тегами <dl> и </dl>. Применяются для создания словарей, списков терминов и т.п.

<!--- список определений --->
<dl>
  <dt>Термин</dt>
    <dd>Описание...</dd>
  <dt>Термин</dt>
    <dd>Описание...</dd>
</dl> 
 

Термин

Описание...

Термин

Описание...

29 марта 2014

Вложенный список размещают в выбранном теге li родительского списка (после текста).

Списки могут быть разного типа, например в неупорядоченный список можно вложить нумерованный. 

<ul>
  <li>пункт 1</li>
  <li>пункт 2
    <ol>
      <li>подпункт вложенного списка 1</li>
      <li>подпункт вложенного списка 2</li>
    </ol>
  </li>
  <li>пункт 3</li>
</ul>

• пункт 1
• пункт 2
  1. подпункт вложенного списка 1
  2. подпункт вложенного списка 2
• пункт 3

Вложенные списки наследуют свойства родительских, поэтому, в некоторых случаях, имеет смысл прописать для них свойства отдельно

ul>li ul {свойства;}
ul>li li {свойства;}

29 марта 2014

Теги ul и li - блочные элементы.
Если размеры не заданы явно, занимают всю доступную ширину родительского блока и высоту, необходимую для размещения содержимого. Браузеры устанавливают для них свои отступы по умолчанию (а иногда и свои маркеры). Поэтому, если эти значения вас не устраивают, нужно их изначально переопределить.

Для наглядности зададим для тегов ul и li рамки и цвет фона разного цвета.

• ul {margin-left: 10px; padding: 10px;}
• li {margin-left: 0px; padding: 0px;} Настройки по умолчанию
• li {margin-left: 0px; padding: 0px;list-style: none;} без маркера
• li {margin: 10px; padding: 0px;}
• li {margin: 0px; padding: 10px;}
• li {margin: 10px; padding: 10px;}

Пояснения:

Левый внешний отступ отодвигает список от края содержащего родительского контейнера и обычно устанавливается 20-40px.
Внутренний отступ не устанавливается.

Для тега li отступы, обычно, не устанавливаются.
Высота строки простых списков часто задается line-height

/*-- CSS. Примерные значения по умолчанию --*/
ul {
  margin: 0 0 10px 25px;
}
li {
  line-height: 20px;
}

08 марта 2015

Список по центру

Автоматически центрировать список вне зависимости от длины строк достаточно просто

/* -- Стиль CSS --*/
div.center_list{
  text-align: center;
}
div.center_list > ul {
  display: inline-block;
  text-align: left;
  max-width: 70% /* не обязательно */
}

Минус данного способа в необходимости дополнительной разметки - список должен быть заключен в содержащий контейнер, которому присвоен класс div.center_list.

Горизонтальный список

Иногда, например при использовании списка в качестве меню, нужно расположить элементы списка в строку.

Вариант 1. Сделать элементы списка строчными

/*-- CSS. Строчный вариант --*/
 
li {
  display:inline;
  padding:0 10px;
}

Получаем список такого вида:

Вариант 2. Сделать элементы списка плавающими

/*-- CSS. Плавающий вариант --*/
 
ul {
  list-style: none; /* убираем маркеры, если нужно */
}
li {
  float: left; /* для выравнивания по правому краю - right */
  padding: 0 10px;
}

Получаем такой же список:

На практике, в частности при создании меню на основе списка, чаще используется второй вариант.

Плавающий список

Заголовок не совсем точен; речь идет о списке, обтекающем плавающий элемент.

И опять возвращаемся к плавающим элементам. Два понятия - "плавающий элемент" и "обтекание". Необходимо четко представлять что это такое, что где плавает и что обтекает:

Плавает элемент, у которого свойству float присвоено
значение left или right.

И плавает у соответствующей кромки содержащего блока или прижимается соответствующей кромкой к другому плавающему элементу.

Следующие за ним, обычные блоки никого не обтекают! Они "тупо" не видят плавающий блок....

Подлость происходящего в том и состоит, что обтекает только текст (строчные элементы и элементы с установленным свойством display: inline или display: inline-block!

Когда-то изначально свойство float именно для этого и было придумано!

Все неприятности - от маркеров, которые не являются строчными элементами, и часто происходит следующее:

• пункт 1
• пункт 2

Наверняка, многие тщетно пытались вытащить маркер из под плавающего блока, увеличивая margin и padding ...

Попытка увеличить правый отступ плавающего элемента выглядела бы более успешно, если бы не параграфы.

Вот как это может выглядеть:

Параграф до списка

• пункт 1
• пункт 2

Параграф после списка

Согласитесь, не очень красиво.

Решение

/*-- CSS --*/
/*-- Cтиль, установленный по умолчанию --*/
ul {
  margin: 0 0 10px 25px;
}
/*-- Переопределяем стили --*/
ul {
  margin: 0 0 10px 10px;
  padding-left: 15px;
  overflow: hidden;
}

В результате получаем:

Параграф до списка

• пункт 1
• пункт 2

Параграф после списка

Особенности применения

Чтобы оставить отступ обычных, не обтекающих списков неизменным, мы уменьшили margin и увеличили padding на одинаковую величину. Отступ маркера от начала текста равен размеру шрифта (14px), и padding должен быть больше этой величины, иначе маркер обрежет.

Мы определили свойства для тега ul. Т.е. для всех списков на сайте. Это не очень хорошо, так-как overfow: hidden, в некоторых случаях, может оказаться не безобидным. Поэтому нужно выбрать один из способов использования данного метода:

1. Если обтекающий список - редкое исключение:

Добавляем конкретным тегам ul класс, например ul.folat_list, и прописываем свойства уже для класса.

2. Обратная ситуация, когда свойство необходимо присвоить только спискам без класса:

Используем следующую конструкцию (только для соврменных браузеров, поддерживающих CSS3)

/*-- CSS --*/
/*-- Для "деклассированных" списков --*/
ul:not([class])  {
  margin: 0 0 10px 10px;
  padding-left: 15px;
  overflow: hidden;
}

Для всех остальных списков, с установленным значением атрибута class, будут применяться стили по умолчанию.