Вложенный список не работает

Question

Это мой код. Проблема заключается в том, что список не вложен правильно. Я добавил padding-left, но число в левом поле не исчезает.

#li { 
 
    padding-left: 20px !important; 
 
}

<h3>My grocery store</h3> 
 
<hr></hr> 
 
<p>Following items are available at my store:</p> 
 
<ol> 
 
    <li>Sugar</li> 
 
    <li>Chocolates : 
 
    <li id="li">Toblerone</li> 
 
    <li id="li">Nestle</li> 
 
    </li> 
 
    <li>Rice</li> 
 
    <li>Other food items..</li> 
 
</ol> 
 
<img src="C:/Users/James007/Desktop/shop.JPEG"></img>

Answer 1

Вы должны добавить еще <ol> тег внутри <li> тега, потому что список вложен в элемент списка. См. W3C Spec.

<h3>My grocery store</h3> 
 
<hr></hr> 
 
<p>Following items are available at my store:</p> 
 
<ol> 
 
    <li>Sugar</li> 
 
    <li>Chocolates : 
 
    <ol> 
 
     <li>Toblerone</li> 
 
     <li>Nestle</li> 
 
    </ol> 
 
    </li> 
 
    <li>Rice</li> 
 
    <li>Other food items..</li> 
 
</ol> 
 
<img src="C:/Users/James007/Desktop/shop.JPEG"></img>

Кроме того, удалить </hr> и </img>, так как пустые элементы не имеют закрывающих тегов.

Answer 2

В качестве вложенного списка, который считается списком в списке, вы должны открыть еще один <ol> или <ul> внутри большого. При этом вам не нужен тег id.

Кстати, тег id предполагается использовать только один раз на странице HTML. Для многократного использования лучше использовать class. Это делается с точкой (.) вместо хеша (#) в CSS. См. W3C.

Чтобы закончить, как указано в документе Pragmatick, <img /> и <hr />, самозакрывающиеся.

См код ниже:

.li { 
 
    padding-left: 20px !important; 
 
}

<h3>My grocery store</h3> 
 
<hr /> 
 
<p>Following items are available at my store:</p> 
 
<ol> 
 
    <li>Sugar</li> 
 
    <li>Chocolates : 
 
    <ul> 
 
     <li class="li">Toblerone</li> 
 
     <li class="li">Nestle</li> 
 
    </ul> 
 
    </li> 
 
    <li>Rice</li> 
 
    <li>Other food items..</li> 
 
</ol> 
 
<img src="C:/Users/James007/Desktop/shop.JPEG" />

Answer 3

Ответ 1 является правильным.

Чтобы сделать вложенные списки, вы должны поместить список внутри списка. Таким образом, вам не хватало ol внутри li. Что имеет смысл, не так ли?

Здесь у вас есть видео, которое записывает вложенный список https://www.youtube.com/watch?v=VTKonB86J2s

Технические справочный http://www.w3.org/wiki/HTML_lists

<ol> 
    <li>Sugar</li> 
    <li>Chocolates : 
    <ol> 
     <li>Toblerone</li> 
     <li>Nestle</li> 
    </ol> 
    </li> 
    <li>Rice</li> 
    <li>Other food items..</li> 
</ol>