Поиск…


Синтаксис

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


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow