HTML-有序列表未正確編號

Question

我正在嘗試使用HTML來：

• 創建2個有序列表
• 在每個OL內嵌套一個無序列表，並在其中添加一些元素

但是，我的編號未按應有的方式工作，而是1. 1.而不是1. 2.等等。

我的代碼：

 <ol> <li>Fruits</li> <ul> <li>Apples</li> <li>Oranges</li> <li>Plum</li> <li>Watermelon</li> </ul> </ol> <ol> <li>Vegetables</li> <ul> <li>Carrots</li> <li>Lettuce</li> <li>Cucumber</li> <li>Tomato</li> </ul> </ol> 

Answer 1

聽起來您實際上想要的是1個有序列表，而不是2個。如果您希望第一個列表具有數字1，第二個列表具有數字2，那就是一個列表。 如果您開始一個新列表，數字將重置。

 <ol> <li>Fruits <ul> <li>Apples</li> <li>Oranges</li> <li>Plum</li> <li>Watermelon</li> </ul> </li> <li>Vegetables <ul> <li>Carrots</li> <li>Lettuce</li> <li>Cucumber</li> <li>Tomato</li> </ul> </li> </ol> 

Answer 2

不知道為什么所有人都會反對文檔，正式地，您不能將<ul>元素嵌套為<ol>元素的直接子元素，反之亦然，所以我相應地修改了標記。

演示

<ol>
    <li>
        <h2>Fruits</h2>
        <ul>
            <li>Apples</li>
            <li>Oranges</li>
        </ul>
    </li>
    <li>
        <h2>Vegetables</h2>
        <ul>
            <li>Carrot</li>
        </ul>
    </li>
</ol>

在這里，您可以根據自己的需要調整無序列表的padding和margin ，但我只是給出了大概的方式。

您也可以在<h2>位置使用<p>或任何其他標簽，但我認為<h2>或<h3>應該適合您的情況。

Answer 3

也許您不使用list-style -property，而是使用counter-increment -property，因此您的HTML保持不變。

 ol { counter-increment: section; } ol > li { list-style-type: none; } ol > li:before { content: counter(section)". "; } 

 <ol> <li>Fruits</li> <ul> <li>Apples</li> <li>Oranges</li> <li>Plum</li> <li>Watermelon</li> </ul> </ol> <ol> <li>Vegetables</li> <ul> <li>Carrots</li> <li>Lettuce</li> <li>Cucumber</li> <li>Tomato</li> </ul> </ol> 

Answer 4

您要在第一行之后結束有序列表。 請勿在整個有序列表的末尾放置標簽。 下面的例子。

 <ol> <li>Fruits</li> <ul> <li>Apples</li> <li>Oranges</li> <li>Plum</li> <li>Watermelon</li> </ul> <li>Vegetables</li> <ul> <li>Carrots</li> <li>Lettuce</li> <li>Cucumber</li> <li>Tomato</li> </ul> </ol>