如何正确地使用子排序列表

时间:2012-10-04 15:49:54

标签: html5

我不确定我理解这个的后勤。基本上我想在网络博客上做一个简单的列表,如下所示:

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 个答案:

答案 0 :(得分:10)

你这样做:

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

您需要将子列表放在列表项中作为顶级。

答案 1 :(得分: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 */

您还可以read more about a similar question here

答案 2 :(得分:0)

我认为你的ol需要在li:

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