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;
}