Блог

Главная - Вопросы по программированию - Неупорядоченный список, вложенный в упорядоченный список

Неупорядоченный список, вложенный в упорядоченный список

#html #nested-lists

#HTML #вложенные списки

Вопрос:

Я вложил неупорядоченный список в упорядоченный список:

 <!DOCTYPE html>

<html>

<head>
  <title>Cascaded lists</title>
</head>

<body>

  <!-- First level -->
  <ol>List1
    <li>List1 item1</li>
    <li>List1 item2</li>
    
      <!-- Second level -->
      <ul>List2
        <li>List2 item1</li>
        <li>List2 item2</li>
        <li>List2 item3</li>
      </ul>
    <li>List1 item3</li>
    <li>List1 item4</li>   
  </ol>

</body>

</html>

Но в Google Chrome, Windows Explorer и Firefox я получаю разные результаты счетчика записей списка.

С Google Crome и Windows Explorer это работает нормально:

 List1 
1.List1 item1
2.List1 item2
 List2 
◦List2 item1
◦List2 item2
◦List2 item3
3.List1 item3
4.List1 item4

Но в Firefox это не работает, и счетчик элементов не игнорирует элементы неупорядоченного списка, и это выглядит следующим образом:

 List1 
1.List1 item1
2.List1 item2
 List2 
◦List2 item1
◦List2 item2
◦List2 item3
4.List1 item3
5.List1 item4

Кто-нибудь знает, как избежать этого эффекта?

Ответ №1:

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

Поэтому вместо:

 <li>List1 item2</li>

  <!-- Second level -->
  <ul>List2
    <li>List2 item1</li>
    <li>List2 item2</li>
    <li>List2 item3</li>
  </ul>

У вас должен быть:

 <li>List1 item2 <!-- removed /li from here -->

  <!-- Second level -->
  <ul>List2
    <li>List2 item1</li>
    <li>List2 item2</li>
    <li>List2 item3</li>
  </ul>
</li> <!-- added /li here -->

Вот скрипт, показывающий эту структуру, и она корректно работает как в Chrome, Firefox, так и в Edge: https://jsfiddle.net/dnyrs940 /