Вложенные списки

Комментарии

Вложенные или многоуровневые списки предназначены для организации сложной иерархической структуры текста, обычно таких документов, как юридические или технические. Реально на веб-странице нельзя автоматически ввести многоуровневую нумерацию типа использования подпунктов 1.1 или 2.1.3. Поэтому приходится вводить числа отдельно или упрощать отображение списка. Так в примере 1 пункты и подпункты списка обозначаются числами.

Пример 1. Создание многоуровневого списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Списки</title>
 </head>
 <body>
  <ol>
   <li>Русская кухня
    <ol>
     <li>Уха бурлацкая</li>
     <li>Бабушкина тюря</li>
     <li>Растегай</li>
    </ol>
   </li>
   <li>Украинская кухня</li>
   <li>Молдавская кухня</li>
   <li>Кавказская кухня</li>
   <li>Прибалтийская кухня</li> 
  </ol>
 </body>
</html>

Результат действия данного примера приведён на рис. 1. Второй список <ol> вкладывается внутрь элемента <li> сразу же после текста пункта. Обратите внимание, что у подпунктов имеется отступ слева, но нет вертикальных отступов сверху и снизу списка.

Вид многоуровневого списка

Рис. 1. Вид многоуровневого списка

Альтернативно можно использовать в качестве подпунктов латинские буквы или римские цифры (пример 2).

Пример 2. Представление многоуровневого списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Списки</title>
  <style>
   ol li { font-weight: bold;  /* Выделение пунктов */ }
   ol ol { list-style: lower-alpha;  /* Тип нумерации подпунктов */ }
   ol ol li { font-weight: normal;  /* Оформление подпунктов */ }
  </style>
 </head>
 <body>
   <ol>
    <li>Русская кухня
     <ol>
     <li>Уха бурлацкая</li>
     <li>Бабушкина тюря</li>
     <li>Растегай</li>
    </ol>
   </li>
   <li>Украинская кухня</li>
   <li>Молдавская кухня</li>
  </ol>
 </body>
</html>

Применение стилей также позволяет по-разному выделять и оформлять пункты и подпункты (рис. 2).

Выделение пунктов списка

Рис. 2. Выделение пунктов списка

Следует учитывать, что стиль селектора ol наследуется селектором li, поэтому для пунктов и подпунктов приходится задавать разное оформление, чтобы стиль не перекочёвывал с одного элемента списка на другой.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 05.09.2017
Редакторы: Влад Мержевич