Чат PHP-разработчиков
Вложенный список в HTML

Делаем вложенный список в HTML

Список данного типа создается весьма просто. В первую очередь необходимо сделать список первого уровня. После чего внутрь элемента данного списка, под которым должен быть еще один внутренний список, добавить второй уровень, задействовав для этого парный тег <li></li>. Ничего сложного, но необходима внимательность, чтобы корректно осуществить закрытие всех тегов.

Приведем пример, указав, каким образом можно допустить ошибку в решении такой задачи.

Вот так выглядит правильный код вложенного списка:

<ul>
  <li>1
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li>2</li>
</ul>

А вот так – неправильный.

<ul>
  <li>1</li>
  <ul>
    <li>1.1</li>
    <li>1.2</li>
  </ul>
  <li>2</li>
</ul>

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

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

Давайте добавим к одной из книг её содержание:

...
<h3>Содержание книги</h3>
<ul>
  <li>1. Как создавать чистый код
    <ul>
      <li>1.1 Правильно называем переменные</li>
      <li>1.2 Правильно называем функции</li>
    </ul>
  </li>
  <li>2. Как делать из плохого кода хороший</li>
</ul>
...

Результат в браузере:

Советую хорошенько запомнить то, в каком порядке идут теги для вложенного списка - для поисковиков это очень важно.

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • попрактикуйтесь в создании вложенных списков
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (17)


Vlad

Зачем в маркированном списке вы использовали цифры... Для это ведь лучше подходит нумерованный список? В браузере отражаться и маркировка и цифра... это не есть хорошо )))

ivashkevich

Верное замечание) Писал пример ночью - вот и результат

Dmixer

Артем,добрый день!Подскажите пожалуйста,у меня маркеры поменяны местами.Черный маркер имеет другую геометрическую форму.Это версия нотпэда,или я где-то допустил ошибку?Открывал через разные браузеры.

ivashkevich

Добрый день! Скиньте ваш код в комментариях, гляну. Мне кажется просто другая версия браузера.

Dmixer
<ul>
      <li>Крепления
         <ul>
            <li>MTB</li>
            <li>Look и SPD</li>
         </ul>
       </li>
 </ul>
ivashkevich

Всё норм, просто другой браузер. Маркеры можно и явно указать - http://htmlbook.ru/content/svoystva-spiskov

Dmixer

Благодарю!

WebShaker

Зачем в маркированном списке вы использовали цифры... Для это ведь лучше подходит нумерованный список? В браузере отражаться и маркировка и цифра... это не есть хорошо )))
ничего не понял из вышесказанного, можно поподробней?!

ivashkevich

Всё правильно говорите) Это проверка на внимательность была :)

WebShaker

То есть уже исправили? я уже подумал что там чтото неправильно.

ivashkevich

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

ImmortalPsych

Доброго времени суток, автор! Спасибо за учебное пособие!
Вот код на нумерованный список с вложением (научился по твоему пособию))):

<ol>
    <li>1
        <ul>
            <li>1.1</li>
            <li>1.2</li>
        </ul>
    </li>
    <li>2</li>
</ol>
ivashkevich

Норм всё)

ImmortalPsych

Я тут такую речь бахнул, а потом смотрю, ты изменил комент)) Спасиб

ivashkevich

:D

Gosha.ryash

В данном случае получается, что человек выше решил только часть проблемы. Список первого порядка будет маркироваться только цифрами, но список второго все также и цифрой и точкой. Можно ли как-то задать цифрами именно 1.1 , 1.2 и прочие без точек левее них?

Хотя там у него и с первым порядком косяки
Зачем нужно писать <li>1 если <ol> итак осуществляет нумерацию. В результате он получит 1 1 и 2 2

ivashkevich

Можно, с помощью CSS, вот так.

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований