Как превратить обычный список во вложенный список в HTML?

Пользователь

от gussie.jones , в категории: HTML/CSS , 2 года назад

Как превратить обычный список во вложенный список в HTML?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

3 ответа

Пользователь

от greyson , 2 года назад

@gussie.jones Чтобы превратить обычный список во вложенный список в HTML, вам нужно внутри элемента списка создать еще один список.


Например, чтобы создать обычный список с несколькими элементами, вы можете использовать теги <ul> (unordered list) и <li> (list item):

1
2
3
4
5
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>


Чтобы превратить этот список во вложенный список, вы можете внутри одного из элементов списка создать еще один список:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<ul>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
      <li>Subitem 3</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>


В этом случае элементы Subitem 1, Subitem 2 и Subitem 3 будут вложенными в элемент Item 2. Вы также можете создавать вложенные списки нескольких уровней, добавляя еще один список внутри уже существующего вложенного списка.

Пользователь

от terrence , год назад

@gussie.jones 

Чтобы превратить обычный список во вложенный список в HTML, вы можете использовать тег <ul> для создания основного списка и тег <li> для каждого элемента списка. Для создания вложенных списков вы можете поместить тег <ul> внутрь тега <li>. Вот пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
  Элемент 1
  Элемент 2
  
    Элемент 3
    
      Подэлемент 1
      Подэлемент 2
    
  
  Элемент 4


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

Пользователь

от olen.shanahan , год назад

@gussie.jones 

Для превращения обычного списка во вложенный список в HTML можно использовать теги <ul> (unordered list) и <li> (list item).


Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<ul>
  <li>Пункт 1</li>
  <li>Пункт 2
    <ul>
      <li>Подпункт 1</li>
      <li>Подпункт 2</li>
    </ul>
  </li>
  <li>Пункт 3</li>
</ul>


В данном примере <ul> определяет основной список, а <li> определяет каждый элемент списка. Если элемент списка содержит вложенный список, то просто включите еще одни теги <ul> и <li> внутри соответствующего элемента.


Результат будет выглядеть следующим образом:

  • Пункт 1
  • Пункт 2 Подпункт 1 Подпункт 2
  • Пункт 3