Создание многоуровневого списка в HTML сложнее, чем создание многоуровневого списка в текстовом процессоре, но все же может быть достигнуто с помощью HTML и CSS. Ниже приведены шаги по созданию многоуровневого списка в HTML с помощью CSS..
Прежде чем пытаться выполнить следующие шаги, поймите, что для создания многоуровневого списка в HTML вы должны гнездо список в другой элемент списка. Кроме того, поскольку в HTML есть только список маркеров или список номеров, если вы хотите изменить тип списка, вы должны использовать CSS для создания нового типа стиля..
Пример HTML
Ниже приведен пример того, как можно создать многоуровневый список в HTML с использованием HTML и стиля CSS, определенного в тегах HTML. В этом примере у нас есть два элемента списка, а во втором элементе списка другой упорядоченный список с типом стиля списка с более низким альфа-каналом для создания стиля списка a, b и т. Д..
<ол>
<Ли>Первый</ li>
<Ли>Второй
<ол стиль=»список-стиль-тип: нижняя альфа; padding-bottom: 0;»> <ли стиль=»маржа слева: 2em»>Суб второй</ li> <ли стиль=»маржа слева: 2em; padding-bottom: 0;»>Другой Sub</ li> </ ол>
</ li>
<Ли>В третьих</ li>
<Ли>Четвертый </ li>
</ ол>
Примечание
В нашем примере выше мы используем дополнительные отступы и поля, чтобы помочь адаптироваться к нашим глобальным значениям CSS, чтобы дать пример того, как вы можете добавить или уменьшить отступ..
Пример вывода
- Первый
- Второй
- Суб второй
- Другой Sub
- В третьих
- Четвертый
Пример CSS и HTML
Приведенное выше решение отлично работает, если вам нужно всего несколько раз создать многоуровневый список. Однако, если вы намереваетесь иметь несколько многоуровневых списков на своем сайте, было бы лучше включить код CSS, аналогичный приведенному ниже примеру. В нашем примере мы создали два класса с именем «Римский» и «квадрат» и назовите их в HTML-коде.
CSS код
<тип стиля=»текст / css»>
.Римский {
список-стиль-тип: нижний римский;
}
.квадрат {
тип-стиль-список: квадрат;
маржа слева: -2em;
}
</стиль>
HTML код
<ul class=»Римский»>
<Ли>Первый</ li>
<Ли>Второй
<ul class=»квадрат»>
<Ли>Суб второй</ li>
<Ли>Другой Sub</ li>
</ ul>
</ li>
<Ли>В третьих</ li>
<Ли>Четвертый</ li>
</ ul>
Пример вывода
- Первый
- Второй
- Суб второй
- Другой Sub
- В третьих
- Четвертый
Доступные значения CSS list-style-type
Ниже приведен список других значений типа списка CSS, которые можно использовать вместо примеров, которые мы показали ранее. Мы также включили краткое описание каждого значения.
Примечание
Не все эти значения работают или кажутся одинаковыми во всех браузеры.
диск — Маленький сплошной кружок (показан выше).
круг — Маленький пустой кружок (показан выше).
квадрат — Сплошной квадрат.
десятичный — Десятичный номер, начинающийся с «1.» (показано выше).
десятичный-ведущий-ноль — Десятичное число, начинающееся с 0 (например, 01, 02, 03 и т. Д.).
нижний римский — Строчные буквы римская цифра, начинающаяся с «я.».
верхний римский — Верхний регистр римская цифра, начинающаяся с «я.».
нижнегреческий — Строчный греческий.
нижнелатинский — Строчная латиница
верхнелатинский — Прописные латинские буквы
армянский — Традиционная армянская нумерация
грузинский — Традиционная грузинская нумерация
нижняя альфа — Строчные буквы алфавитный надпись, начинающаяся с «а.» (показано выше).
верхняя альфа — Буквы в верхнем регистре, начинающиеся с «А.».
никто — Ничего не показывать.