Как правильно создать вложенный список когда один список помещается внутри другого

Как сделать вложенный список?

Браузеры самостоятельно меняют вид маркеров вложенного списка, чтобы они различались от родительского списка (рис. 1).

Рис. 1. Вид вложенного списка

См. также

Группа списков
Маркированные списки
Нумерация страниц
Нумерованные списки
Создание списков
Списки
Текст в HTML

Многоуровневый список

Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальный тренажёр.

Создать многоуровневый список достаточно просто.

Пример правильного кода:
Пример кода с ошибкой:

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

Количество уровней в списках не ограничено. В многоуровневом списке можно использовать как упорядоченные, так и неупорядоченные списки.

В этом задании мы потренируемся работать с многоуровневыми списками.

Перейти к заданию

index.html Сплит-режим

1.8. HTML-списки

HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:

маркированный список —
- отмечается маркером,
- нумерованный список —
  — каждый элемент списка
- отмечается цифрой,
- список определений — — состоит из пар термин — определение.
Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение.

Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.

Создание HTML-списков
- Содержание:
- 1. Маркированный список
- 2. Нумерованный список
- 3. Список определений
- 4. Вложенный список
- 5. Многоуровневый нумерованный список
1. Маркированный список
Браузеры по умолчанию добавляют следующее форматирование блоку списка:
- Microsoft
- Google
- Apple
- IBM
2. Нумерованный список
Блок списка также имеет стили браузера по умолчанию:
1. Microsoft
2. Google
3. Apple
4. IBM
3. Список определений

Списки определений создаются с помощью элемента . Для добавления термина применяется элемент , а для вставки определения — элемент .

Блок списка определений имеет следующие стили браузера по умолчанию:
```
 Режиссер:
 Петр Точилин
 В ролях:
 Андрей Гайдулян
 Алексей Гаврилов
 Виталий Гогунский
 Мария Кожевникова
 
```
Режиссер: Петр Точилин В ролях: Андрей Гайдулян Алексей Гаврилов Виталий Гогунский Мария Кожевникова Фигура. 3. Список определений

4. Как создать вложенный список

Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей:
- Пункт 1.
- Пункт 2.
  - Подпункт 2.1.
  - Подпункт 2.2.
    - Подпункт 2.2.1.
    - Подпункт 2.2.2.
    - Пункт 1.
    - Пункт 2.
      - Подпункт 2.1.
      - Подпункт 2.2.
        
        Подпункт 2.2.1.
        
        Подпункт 2.2.2.
        
        5. Многоуровневый нумерованный список
        
        Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:
        
        Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
        
        counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
        
        counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
        
        content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.
        
        ol < /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ counter-reset: li; >li:before < /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li, ".") ". "; >
        
        Фигура. 5. Многоуровневый нумерованный список
        
        Публикации по этой теме:
        
        Адаптивное выпадающее мега меню на CSS
        
        Горизонтальное выпадающее многоуровневое меню
        
        Оформление многоуровневых нумерованных списков
        
        Вертикальное меню для сайта
        
        Горизонтальное выпадающее меню
        
        Примеры красивого оформления списков
        
        Горизонтальное меню для сайта
        
        2.9. CSS-списки
        
        Поделиться:
        
        HTML
        
        1.1. Основы HTML
        
        1.2. HTML-элементы
        
        1.3. HTML-атрибуты
        
        1.4. HTML-текст
        
        1.5. HTML-ссылки
        
        1.6. HTML-изображения
        
        1.7. HTML-таблицы
        
        1.8. HTML-списки
        
        1.9. Спецсимволы HTML
        
        1.10. HTML-генераторы
        
        1.11. Семантические элементы HTML5
        
        1.11.1. Элемент документа
        
        1.11.2. Метаданные документа
        
        1.11.3. Разделы документа
        
        1.11.4. Группировка содержимого
        
        1.11.5. Семантика уровня текста
        
        1.11.6. Правки документа
        
        1.11.7. Встраиваемое содержимое
        
        1.11.8. Ссылки
        
        1.11.9. Табличные данные
        
        1.11.10 Формы
        
        1.11.11. Интерактивные элементы
        
        1.11.12. Скрипты
        
        1.12. HTML5-аудио
        
        1.13. HTML5-видео
        
        1.14. Необязательные теги HTML5-разметки
        
        1.15. HTML5-формы
        
        1.16. Контентная модель HTML5
        
        2.1. Основы CSS
        
        2.2. CSS блочная модель
        
        2.3. Блочные и строчные элементы
        
        2.4. CSS-позиционирование
        
        2.5. CSS-текст
        
        2.6. CSS-шрифты
        
        2.7. CSS-ссылки
        
        2.8. CSS-таблицы
        
        2.9. CSS-списки
        
        2.10. CSS-фон
        
        2.11. CSS-рамка
        
        2.12. CSS content
        
        2.13. CSS-цвета
        
        2.14. CSS-генераторы
        
        2.15. CSS3 UI
        
        2.16. CSS-градиент
        
        2.17. CSS3-рамка
        
        2.18. CSS3-оформление текста
        
        2.19. CSS-тень блока
        
        2.20. CSS-переходы
        
        2.21. CSS-трансформации
        
        2.22. CSS-анимация
        
        2.23. CSS flexbox
        
        2.24. CSS колонки
        
        2.25. CSS 3D-трансформации
        
        2.26. CSS-медиазапросы
        
        2.27. CSS-фильтры
        
        2.28. CSS Grid
        
        2.29. CSS3-шрифты
        
        2.30. CSS3-переполнение
        
        2.31. CSS3-способы письма
        
        2.32. Объединение и смешивание слоев
        
        2.33. CSS-фрагментация
        
        3.1. Основы JavaScript
        
        3.2. Выражения в JavaScript
        
        3.3. Циклы JavaScript
        
        3.4. DOM — объектная модель документа
        
        3.10. Введение в jQuery
        
        3.11. Методы jQuery
        
        3.11.1. Манипуляции HTML-элементами
        
        3.11.2. Чтение и изменение CSS-свойств, классов и атрибутов
        
        3.11.3. Обход DOM и выборка HTML-элементов
        
        3.11.4. jQuery анимация
        
        3.11.5. Методы объекта window
        
        3.12. События jQuery
        
        3.13. Селекторы jQuery
        
        4.1. Пять принципов выбора и использования шрифтов
        
        4.2. Выбираем шрифт для сайта
        
        4.3. Правила веб-типографики
        
        Последние записи
        
        2014-2023 © Елена Назарова,
        
        Коммерческое использование материалов сайта HTML5BOOK.RU запрещено. В остальных случаях обязательно наличие индексируемой ссылки со словом «Источник» на сайт или на страницу, содержащую этот материал.
        
        Как сделать вложенный список?
        
        Сделать один маркированный список находящийся внутри другого.
        
        Решение
        
        , а вложенный список вставляется внутрь одного из тегов
        , как показано в примере 1.
        
        Пример 1. Вложенный список
        
        HTML5 IE Cr Op Sa Fx
        
        Браузеры самостоятельно меняют вид маркеров вложенного списка, чтобы они различались от родительского списка. Исключением является Opera, в которой маркеры не меняются.
        
        Статьи по теме
        
        Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
        
        Популярные рецепты
        
        Как добавить картинку на веб-страницу?
        
        Как добавить иконку сайта в адресную строку браузера?
        
        Как добавить фоновый рисунок на веб-страницу?
        
        Как сделать обтекание картинки текстом?
        
        Как растянуть фон на всю ширину окна?
        
        Как выровнять фотографию по центру веб-страницы?
        
        Как разместить элементы списка горизонтально?
        
        Как убрать подчеркивание у ссылок?
        
        Как убрать маркеры в маркированном списке?
        
        Как изменить расстояние между строками текста?
        
        Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
        
        Как открыть ссылку в новом окне?
        
        Читать:
        Фасетный индекс битрикс что это