logo标签列表

如何正确创建有序子列表

html
5

我不确定我理解这个的物流。基本上，我想在网志上制作一个简单的列表，看起来像：

1.  item1
    a.  item2
2.  item3
    a.  item4
    b.  item5
3.  item6

基本上，这是一个按数字顺序排序的主列表，每个主项下面都有子列表，子列表使用 lower-alpha 进行排序。

我通过使用以下 HTML 标记来实现这个效果：

<ol>
    <li>item1</li>
    <ol>
        <li>item2</li>
    </ol>   
    <li>item3</li>
    <ol>
        <li>item4</li>
        <li>item5</li>
    </ol>
    <li>item6</li>
</ol>

通过这个简单的CSS规则：
ol ol { list-style-type: lower-alpha; } /* sub ordered lists */

我的问题是，根据w3c验证器：

在此上下文中，元素ol不允许作为元素ol的子元素。

我认为这个问题应该有一个非常简单的解决方案，但我没有找到一个，并且我不确定为什么ol不能是ol的子元素。

3个回答
10

你可以这样做：

<ol>
    <li>item1
        <ol>
            <li>item2</li>
        </ol>
    </li> 
</ol>

你需要将子列表放在顶级列表项内。

4
有几种方法可以控制您的子有序列表，可以使用CSS或HTML。您几乎已经实现了您想要的效果，就像这样：
1.  item1
    a.  item2
2.  item3
    a.  item4
    b.  item5
3.  item6

你的HTML应该长这样:

<ol>
    <li>item1
        <ol>
            <li>item2</li>
        </ol>
    </li>
    <li>item3
        <ol>
            <li>item4</li>
            <li>item5</li>
        </ol>
    </li>
    <li>item6</li>
</ol>

你的CSS应该如下所示：

ol li{ list-style-type:decimal; } /* sub ordered lists level 1 */
ol li ol li { list-style-type: lower-alpha; } /* sub ordered lists level 2 */

您也可以在这里阅读关于类似问题的更多信息

。
0

我认为你的ol需要放在li中：

<ol>
    <li>item1</li>
    <li>
        <ol>
            <li>item2</li>
        </ol> 
    </li>
</ol>
我先读了这个，但感到困惑，它需要放在item1的li标签内才能达到所需的呈现效果。 - user17753
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接