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

Вложенные или многоуровневые списки предназначены для организации сложной иерархической структуры текста, обычно таких документов, как юридические или технические. Реально на веб-странице нельзя автоматически ввести многоуровневую нумерацию типа использования подпунктов 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, поэтому для пунктов и подпунктов приходится задавать разное оформление, чтобы стиль не перекочёвывал с одного элемента списка на другой.

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

Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты