Списки HTML
Список является простейшим способом группирования однородных элементов.
Списки бывают:
- нумерованные
- маркированные
- списки определений
Нумерованные списки
Заключаются в теги <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
- Меняем номер на 8
- Последующие номера меняются автоматически
Наиболее часто используемые значения свойства list-style-type
:
decimal - обычные числа (по умолчанию)
upper-alpha - заглавные латинские буквы
lower-alpha - строчные латинские буквы
upper-roman - римские числа
Внимание!
Маркеры нумерованных списков выравниваются по правому краю! Поэтому, при достаточно больших числах (например 1802 или XXVII) маркер смещается влево и может выйти за пределы родительского блока!
Это решается установкой большего левого отступа для тега ol
.
Маркированные списки
Заключаются между тегами <ul></ul>
<!--- неупорядоченный список ---> <ul> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ul>
Обычный маркированный список, внешний вид которого определяется значениями по умолчанию Вашего браузера
- пункт 1
- пункт 2
- пункт 3
Вы можете изменить вид маркеров как всего списка, так и отдельных пунктов с помощью свойства list-style-type
:
circle - кружок
disc - жирная точка
square - квадрат
none - без маркера
Интересная особенность
Точно так-же значение none можно присвоить свойству list-style-type: none
тега ol
Более того! Нумерованный и маркированный списки отличаются только значением этого свойства!
ul {list-sytle-type: decimal;} = ol
Результат будет идентичным!
Для добавления своих маркеров используют свойство , но пользуются им редко, потому что сложно позиционировать изображение маркера. Легче в качестве маркера использовать фоновое изображение для тегов
.
Списки определений
Заключаются между тегами
и . Применяются для создания словарей, списков терминов и т.п.<!--- список определений ---> <dl> <dt>Термин</dt> <dd>Описание...</dd> <dt>Термин</dt> <dd>Описание...</dd> </dl>
- Термин
- Описание...
- Термин
- Описание...
Вложенный список размещают в выбранном теге родительского списка (после текста).
Списки могут быть разного типа, например в неупорядоченный список можно вложить нумерованный.
<ul> <li>пункт 1</li> <li>пункт 2 <ol> <li>подпункт вложенного списка 1</li> <li>подпункт вложенного списка 2</li> </ol> </li> <li>пункт 3</li> </ul>
- пункт 1
- пункт 2
- подпункт вложенного списка 1
- подпункт вложенного списка 2
- пункт 3
Внимание!
По спецификации, теги ul
и ol
могут содержать в себе только теги li
!
Все иные теги, в данном случае теги вложенного списка, должны располагаться внутри тегов li
Вложенные списки наследуют свойства родительских, поэтому, в некоторых случаях, имеет смысл прописать для них свойства отдельно
ul>li ul {свойства;}
ul>li li {свойства;}
Теги 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; }
Список по центру
Автоматически центрировать список вне зависимости от длины строк достаточно просто
/* -- Стиль CSS --*/ div.center_list{ text-align: center; } div.center_list > ul { display: inline-block; text-align: left; max-width: 70% /* не обязательно */ }
- пункт списка 1
- пункт списка 2 большей длины
- пункт 3
Минус данного способа в необходимости дополнительной разметки - список должен быть заключен в содержащий контейнер, которому присвоен класс div.center_list
.
Горизонтальный список
Иногда, например при использовании списка в качестве меню, нужно расположить элементы списка в строку.
Вариант 1. Сделать элементы списка строчными
/*-- CSS. Строчный вариант --*/ li { display:inline; padding:0 10px; }
Получаем список такого вида:
- элемент списка 1
- элемент списка 2
- элемент списка 3
Вариант 2. Сделать элементы списка плавающими
/*-- CSS. Плавающий вариант --*/ ul { list-style: none; /* убираем маркеры, если нужно */ } li { float: left; /* для выравнивания по правому краю - right */ padding: 0 10px; }
Получаем такой же список:
- элемент списка 1
- элемент списка 2
- элемент списка 3
На практике, в частности при создании меню на основе списка, чаще используется второй вариант.
Плавающий список
Заголовок не совсем точен; речь идет о списке, обтекающем плавающий элемент.
И опять возвращаемся к плавающим элементам. Два понятия - "плавающий элемент" и "обтекание". Необходимо четко представлять что это такое, что где плавает и что обтекает:
Плавает элемент, у которого свойствуfloat
присвоено
значениеleft
илиright
.
И плавает у соответствующей кромки содержащего блока или прижимается соответствующей кромкой к другому плавающему элементу.
Следующие за ним, обычные блоки никого не обтекают! Они "тупо" не видят плавающий блок....
Подлость происходящего в том и состоит, что обтекает только текст (строчные элементы и элементы с установленным свойством display: inline
или display: inline-block
!
Когда-то изначально свойство float
именно для этого и было придумано!
Все неприятности - от маркеров, которые не являются строчными элементами, и часто происходит следующее:
- пункт 1
- пункт 2
Наверняка, многие тщетно пытались вытащить маркер из под плавающего блока, увеличивая margin
и padding
...
Попытка увеличить правый отступ плавающего элемента выглядела бы более успешно, если бы не параграфы.
Вот как это может выглядеть:
margin-right: 25px
Параграф до списка
- пункт 1
- пункт 2
Параграф после списка
Согласитесь, не очень красиво.
Решение
/*-- CSS --*/ /*-- Cтиль, установленный по умолчанию --*/ ul { margin: 0 0 10px 25px; } /*-- Переопределяем стили --*/ ul { margin: 0 0 10px 10px; padding-left: 15px; overflow: hidden; }
В результате получаем:
Параграф до списка
Параграф после списка
Особенности применения
Чтобы оставить отступ обычных, не обтекающих списков неизменным, мы уменьшили 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
, будут применяться стили по умолчанию.