嵌套列表不起作用

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

您必须在 <li> 标签内添加另一个 <ol> 标签，因为列表嵌套在列表项内。见 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。

最后，正如 The 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 正确。

要进行嵌套列表，您必须将列表放在列表中。所以你错过了 li 中的 ol。哪个有道理不是吗？

这里有一个写嵌套列表的视频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>

嵌套列表不起作用

Nested list not working

html

css

html-lists