Положение маркера списка

Классы задают, где стоит маркер пункта списка: снаружи области текста (list-outside) или внутри неё (list-inside). Берите list-inside, когда список стоит в узком блоке без отступа слева.

Пример

Фон показывает область списка. У list-inside маркер входит в первую строку, и перенесённая строка начинается под маркером.

<div class="grid grid-col-1 sm:grid-col-2 gap-3 color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">list-outside</code>
    <ul class="m-0 list-outside bg-primary-container color-on-primary-container"><li>Первый пункт списка, длинный настолько, что переносится на вторую строку</li><li>Второй пункт</li></ul>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">list-inside</code>
    <ul class="m-0 list-inside bg-primary-container color-on-primary-container"><li>Первый пункт списка, длинный настолько, что переносится на вторую строку</li><li>Второй пункт</li></ul>
  </div>
</div>

Классы

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

По умолчанию маркер снаружи, а у ul есть отступ под него. С list-inside отступ можно убрать:

<ul class="list-inside p-0">
  <li>Пункт в узкой колонке</li>
</ul>

Ограничения

• С list-inside перенесённые строки начинаются под маркером, а не под текстом: для длинных пунктов оставьте list-outside.
• У семейства нет префиксов ширины экрана и состояний.

См. также

• Стиль маркера списка