Як створити багаторівневий список в HTML

Створення багаторівневого списку в HTML важче, ніж створення багаторівневого списку в текстовому процесорі, але все ще можна досягти за допомогою HTML і CSS. Нижче наведено кроки щодо створення багаторівневого списку в HTML за допомогою CSS.

Перед тим, як спробувати наступні кроки, зрозумійте, що для створення багаторівневого списку в HTML ви повинні вкласти список в інший елемент списку. Крім того, оскільки HTML має або список маркерів, або список номерів, якщо ви хочете змінити тип списку, ви повинні використовувати CSS для створення нового типу стилю.

Приклад HTML

Нижче наведено приклад того, як багаторівневий список можна виконати в HTML за допомогою HTML і стилю CSS, визначеного в HTML-тегах. У цьому прикладі ми маємо два елементи списку і у другому елементі списку інший упорядкований список з нижчим-альфа-стилем-типу для створення стилю списку a, b і т.д.

  1. Спочатку
  2. Друге 
    1. Sub of Second
    2. Інший суб
  3. По-третє
  4. Четверте

Примітка: У нашому прикладі вище ми використовуємо деякі додаткові стилі заповнення і маржі, щоб допомогти адаптуватись до наших глобальних значень CSS і дати приклад того, як можна додати або зменшити простір і відступ.

Приклад виводу

  1. Спочатку
  2. Друге
    1. Sub of Second
    2. Інший суб
  3. По-третє
  4. Четверте

Приклад CSS і HTML

Наведене вище рішення чудово працює, якщо вам потрібно лише кілька разів створити багаторівневий список. Однак, якщо ви плануєте мати декілька багаторівневих списків по всьому сайту, краще б включити код CSS, подібний до прикладу нижче, у ваш CSS-файл. У нашому прикладі ми створили два класи, які називаються "roman" і "square" і викликають їх у HTML-коді.

Код CSS 

 .roman {list-style-type: нижній-роман;}. квадратний {тип-списку-тип: квадрат; margin-left: -2em;}

HTML-код 

  • Спочатку
  • Друге 
    • Sub of Second
    • Інший суб
  • По-третє
  • Четверте

Приклад виводу

  • Спочатку
  • Друге
    • Sub of Second
    • Інший суб
  • По-третє
  • Четверте

Доступні значення стилю стилів CSS

Нижче наведено список інших значень типу стилю списку CSS, які можна використовувати замість прикладів, які ми показали раніше. Ми також включили короткий опис кожного значення.

Примітка: Не всі ці значення працюють або збігаються у всіх браузерах.

диск - Малий суцільний круг (показаний вище).

коло - Малий порожній круг (показано вище).

квадрат - суцільний квадрат.

decimal - десяткове число, що починається з "1." (показано вище).

decimal-leading-zero - десяткове число, що починається з 0 (наприклад, 01, 02, 03 і т.д.).

нижній-римський - нижній роман, що починається з "i."

верхне-римська - прописна римська цифра, що починається з "I.".

нижній грецький - нижній грецький.

нижній латинський - нижній латинський

верхній латинський - верхній латинський

armenian - Традиційна вірменська нумерація

грузинська - традиційна грузинська нумерація

lower-alpha - Буквені літери нижнього регістру, що починаються з "a." (показано вище).

upper-alpha - Буквений алфавіт, що починається з "A.".

none - нічого не показувати.