CSS
Стили списка
Поиск…
Синтаксис
- list-style: list-style-type | list-style-position | list-style-image | начальная | наследовать;
параметры
Значение | Описание |
---|---|
Список стиле типа | тип маркера списка. |
список-стиль-позиция | определяет, где разместить маркер |
список-стиль-изображение | указывает тип маркера списка |
начальная | присваивает этому свойству значение по умолчанию |
унаследовать | наследует это свойство от своего родительского элемента |
замечания
Хотя list-style-type
- это свойство, которое применяется только к элементам списка (обычно <li>
), оно часто указывается для тега списка ( <ol>
или <ul>
). В этом случае элементы списка наследуют свойство.
Тип пули или нумерация
Конкретно для тегов <li>
в неупорядоченном списке ( <ul>
):
list-style: disc; /* A filled circle (default) */
list-style: circle; /* A hollow circle */
list-style: square; /* A filled square */
list-style: '-'; /* any string */
Конкретно для тегов <li>
в упорядоченном списке ( <ol>
):
list-style: decimal; /* Decimal numbers beginning with 1 (default) */
list-style: decimal-leading-zero;/* Decimal numbers padded by initial zeros (01, 02, 03, … 10) */
list-style: lower-roman; /* Lowercase roman numerals (i., ii., iii., iv., ...) */
list-style: upper-roman; /* Uppercase roman numerals (I., II., III., IV., ...) */
list-style-type: lower-greek; /* Lowercase roman letters (α., β., γ., δ., ...) */
list-style-type: lower-alpha; /* Lowercase letters (a., b., c., d., ...) */
list-style-type: lower-latin; /* Lowercase letters (a., b., c., d., ...) */
list-style-type: upper-alpha; /* Uppercase letters (A., B., C., D., ...) */
list-style-type: upper-latin; /* Uppercase letters (A., B., C., D., ...) */
Неспецифические:
list-style: none; /* No visible list marker */
list-style: inherit; /* Inherits from parent */
Положение пули
Список состоит из <li>
элементов внутри содержащего элемента ( <ul>
или <ol>
). Оба элемента списка и контейнер могут иметь поля и paddings, которые влияют на точное положение содержимого элемента списка в документе. Значения по умолчанию для поля и отступов могут отличаться для каждого браузера. Чтобы получить один и тот же макет кросс-браузера, их необходимо установить конкретно.
Каждый элемент списка получает поле «маркер», содержащее маркер маркера. Этот ящик можно разместить внутри или вне поля списка.
list-style-position: inside;
помещает пулю в элемент <li>
, подталкивая содержимое вправо по мере необходимости.
list-style-position: outside;
помещает пулю слева от элемента <li>
. Если в заполнении содержащего элемента недостаточно места, поле маркера будет расширяться влево, даже если оно упадет со страницы.
Отображение результата inside
и outside
позиционирования: jsfiddle
Удаление пуль / номеров
Иногда список должен просто не отображать никаких маркеров или цифр. В этом случае не забудьте указать margin и padding.
<ul>
<li>first item</li>
<li>second item</li>
</ul>
CSS
ul {
list-style-type: none;
}
li {
margin: 0;
padding: 0;
}