<display-listitem>

Базовая Широко доступная

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

Ключевое слово list-item заставляет элемент генерировать псевдоэлемент ::marker с содержимым, указанным его свойствами list-style (например, маркер списка) вместе с основным блоком указанного типа для собственного содержимого.

Синтаксис

Одно значение list-item заставит элемент вести себя как элемент списка. Это можно использовать вместе с list-style-type и list-style-position.

list-item также можно комбинировать с любым ключевым словом <display-outside> и ключевыми словами flow или flow-root <display-inside>.

Примечание: В браузерах, поддерживающих синтаксис из двух значений, если внутреннее значение не указано, оно по умолчанию будет flow. Если внешнее значение не указано, основной блок будет иметь внешний тип отображения block.

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

<display-listitem> = 
  <display-outside>?     &&
  [ flow | flow-root ]?  &&
  list-item              

<display-outside> = 
  block   |
  inline  |
  run-in

Примеры

HTML

<div class="fake-list">I will display as a list item</div>

CSS

.fake-list {
  display: list-item;
  list-style-position: inside;
}

Результат

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

Спецификация
CSS Display Module Level 3 # typedef-display-listitem

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`display-listitem`	1	12	1	7	1	18	4	14	1	1.0	4.4
`legend-support`	71	79	64	58	Нет	71	64	50	Нет	10.0	71

См. также

display

© 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/display-listitem