БлогNot. HTML: многоуровневый список с правильной нумерацией

HTML: многоуровневый список с правильной нумерацией

Средствами HTML легко создать многоуровневый список, просто вкладывая теги <ol> или <ul> внутрь тега <li> элемента родительского списка. Вот только нумерация "многоуровневой" от этого не станет:

многоуровневый список в HTML, "неправильные" номера 2-го уровня подчёркнуты красным
многоуровневый список в 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 просмотра]


теги: учебное html список css

К этой статье пока нет комментариев, Ваш будет первым