Перейти к содержанию

list-style-position

Свойство list-style-position определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка (рис. 1) и inside — маркер обтекается текстом (рис. 2).

Рис. 1. Значение outside

Рис. 2. Значение inside

Демо

Списки, счетчики, генерируемый контент

Синтаксис

1
2
3
4
5
6
7
8
/* Keyword values */
list-style-position: inside;
list-style-position: outside;

/* Global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;

Значения

inside

Маркер является частью текстового блока и отображается в элементе списка.

outside

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

Значение по-умолчанию:

1
list-style-position: outside;

Применяется к элементам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>list-style-position</title>
        <style>
            ul {
                list-style-image: url('/example/image/mathematics.png'); /* Путь к рисунку для установки маркера */
                list-style-position: inside; /* Маркер обтекается текстом */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                Легко проверить, что аффинное преобразование
                монотонно.
            </li>
            <li>
                Доказательство решительно стабилизирует
                отрицательный криволинейный интеграл, явно
                демонстрируя всю чушь вышесказанного.
            </li>
            <li>
                Степенной ряд, в первом приближении,
                расточительно искажает многомерный лист
                Мёбиуса, откуда следует доказываемое
                равенство.
            </li>
        </ul>
    </body>
</html>

Комментарии