list-style
Вид маркеров списка: тип, положение и картинка.
Синтаксис
list-style: type position image;Значения
| Параметр | Тип | Описание |
|---|---|---|
| disc | circle | square | keyword | Формы маркеров для `<ul>`. |
| decimal | upper-roman | keyword | Способы нумерации для `<ol>`; есть также `lower-alpha`, `lower-roman` и другие. |
| none | keyword | Без маркеров. |
| inside | outside | keyword | Маркер внутри текстового блока или снаружи (по умолчанию). |
Примеры
Разные типы маркеров:
<ul style="list-style: square;"><li>Square</li><li>Bullets</li></ul>
<ol style="list-style: upper-roman;"><li>Roman</li><li>Numbers</li></ol>Список, превращённый в горизонтальное меню:
<style>
.menu { list-style: none; padding: 0; display: flex; gap: 12px; }
</style>
<ul class="menu"><li>Home</li><li>Blog</li><li>Contacts</li></ul>Примечания
list-style: none убирает маркеры, но левый отступ списка остаётся — сбросьте его через padding: 0. В Safari список без маркеров может перестать озвучиваться как список; атрибут role="list" это исправляет.
См. также
- ::marker — Маркер или номер пункта списка.
- <ul> — Маркированный список: пункты, порядок которых не важен.
- padding — Внутренний отступ между содержимым и рамкой элемента.
- counter-reset — `counter-reset` создаёт CSS-счётчик (или сбрасывает его), `counter-increment` увеличивает его на каждом подходящем элементе; значение выводится через `counter()`.
Вопросы и ответы по теме
В учебнике
- Оформление списков и таблиц — Вид маркеров и list-style, свои маркеры через ::marker, меню из списка без точек, а также рамки, отступы, выравнивание, полосы-зебра и подпись таблицы.