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

Классы задают вид маркера пункта списка: точку (list-disc), номер (list-decimal) или его отсутствие (list-none). Берите list-none для списков, которые оформлены как меню, теги или карточки.

Пример

Класс меняет маркер независимо от тега: в примере ol с точками и ul с номерами.

<div class="grid grid-col-1 sm:grid-col-3 gap-3 p-3 bg-surface border border-outline-variant radius-surface color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">list-disc</code>
    <ol class="m-0 list-disc"><li>Чай</li><li>Кофе</li><li>Какао</li></ol>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">list-decimal</code>
    <ul class="m-0 list-decimal"><li>Чай</li><li>Кофе</li><li>Какао</li></ul>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">list-none</code>
    <ul class="m-0 list-none"><li>Чай</li><li>Кофе</li><li>Какао</li></ul>
  </div>
</div>

Классы

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

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

Применение

Выбирайте тег по смыслу: ol, когда важен порядок, ul — когда нет. Класс меняет только вид маркера.

<ul class="list-none p-0 flex gap-2">
  <li>Главная</li>
  <li>Каталог</li>
</ul>

list-none не убирает отступ под маркер: снимите его классом p-0.

Ограничения

• Safari с VoiceOver не объявляет список с list-style-type: none списком. Если это важно, добавьте role="list" к ul или ol.
• У семейства нет префиксов ширины экрана и состояний.

См. также

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