list-style-position

Baseline Широко поддерживается

Эта функция хорошо установлена и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Свойство list-style-position CSS задаёт положение ::marker относительно элемента списка.

Попробовать

Синтаксис

/* Keyword values */
list-style-position: inside;
list-style-position: outside;

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

Свойство list-style-position задаётся одним из перечисленных ниже ключевых значений.

Значения

inside: ::marker — первый элемент среди содержимого элемента списка.
outside: ::marker находится вне основного блока. Это значение по умолчанию для list-style.

Описание

Это свойство применяется к элементам списка, то есть элементам с display: list-item;. По умолчанию это включает элементы <li>. Поскольку это свойство наследуется, его можно задать на родительском элементе (обычно <ol> или <ul>), чтобы оно применялось ко всем элементам списка.

Если элемент блока является первым дочерним элементом элемента списка, объявленного как list-style-position: inside, то элемент блока размещается на строке после маркера.

Часто удобнее использовать сокращённую запись list-style.

Формальное определение

Начальное значение	`outside`
Применимо к	элементам списка
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

list-style-position = 
  inside   |
  outside

Примеры

Установка позиции элемента списка

HTML

<ul class="inside">
  List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="outside">
  List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<ul class="inside-img">
  List 3
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>

CSS

.inside {
  list-style-position: inside;
  list-style-type: square;
}

.outside {
  list-style-position: outside;
  list-style-type: circle;
}

.inside-img {
  list-style-position: inside;
  list-style-image: url("star-solid.gif");
}

Результат

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

Спецификация
CSS Lists and Counters Module Level 3 # list-style-position-property

Совместимость браузеров

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`list-style-position`	1	12	1	3.5	1 В Safari, если элемент блока является первым дочерним элементом элемента списка, объявленного как `list-style-position: inside`, то блок-маркер размещается на одной строке с элементом блока.	18	4	14	1 В Safari, если элемент блока является первым дочерним элементом элемента списка, объявленного как `list-style-position: inside`, то блок-маркер размещается на одной строке с элементом блока.	1.0	4.4
`inside`	1	12	1	15	1	18	4	14	1	1.0	4.4
`outside`	1	12	1	15	1	18	4	14	1	1.0	4.4

См. также

list-style сокращение
list-style-type свойство
list-style-image свойство
::marker псевдоэлемент
CSS списки и счётчики модуль
CSS стили счётчиков модуль

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position