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

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
<!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>

Комментарии