Question

这是我的代码。问题是列表没有正确嵌套。我添加了一个左边的填充，但左边距的数字不会消失。

#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。

完成后，正如The Pragmatick所述，<img />和<hr />标记是自动关闭的。

见下面的代码：

＆＃13;

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

＆＃13;

<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" />

＆＃13;

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>

嵌套列表不起作用

3 个答案: