HTML: многоуровневый список с правильной нумерацией
Средствами HTML легко создать многоуровневый список, просто вкладывая теги <ol>
или <ul>
внутрь тега <li>
элемента родительского списка. Вот только нумерация "многоуровневой" от этого не станет:
многоуровневый список в HTML, "неправильные" номера 2-го уровня подчёркнуты красным
Ситуацию легко исправить с помощью пары стилевых указаний, которые необязательно применять ко всем тегам
и <ol>
<li>
, как мы сделали, а можно только к какому-то стилевому классу.
Вот соответствующая разметка, в IE11 это тоже сработает.
<style> ol { list-style: none; counter-reset: li; } li:before { counter-increment: li; content: counters(li,".") ". "; } </style> <ol> <li>Элемент 1 <ol> <li>Элемент 1.1</li> <li>Элемент 1.2</li> </ol> </li> <li>Элемент 2 <ol> <li>Элемент 2.1</li> <li>Элемент 2.2</li> </ol> </li> </ol>
Что изменить для нумерации вида 1.1.1
? Наверное, понятно:
content: counters((li,".") ". ") ". ";
и т.д.
08.09.2020, 16:47 [2694 просмотра]