0

当我遇到这个奇怪的问题时，我一直在为工作做一些 Sharepoint 自定义，并且试图修复嵌套的 OL 编号。

当您在页面上有多个 OL 并使用普遍接受的嵌套编号解决方案时（请参阅：Html ordered list 1.1, 1.2 (Nested counters and scope) not working），当第二个 OL 为时，编号从前一个 OL 继续在 div 标签内。

<html>
<head>
    <style>
        ol { counter-reset: item; }

        ol > li{ display: block; counter-increment: item; }
        ol > li:before { content: counters(item, ".") " "; }
    </style>
</head>
<body>
    <ol>
        <li>One</li>
        <li>Two
            <ol>
                <li>Two One</li>
                <li>Two Two</li>
                <li>Two Three</li>
            </ol>
        </li>
        <li>Three</li>
        <li>Four</li>
    </ol>

    <div>
        <ol>
            <li>One</li>
            <li>Two
                <ol>
                    <li>Two One</li>
                    <li>Two Two</li>
                    <li>Two Three</li>
                </ol>
            </li>
            <li>Three</li>
            <li>Four</li>
        </ol>
    </div>
</body>

有关示例，请参见http://jsfiddle.net/C5Cjp/ 。

我是计数器的新手，所以我很想知道为什么这个功能可以像示例中那样工作，以及是否有一种简单的方法可以修复它，以便第二个不相关的 OL 的计数器重置。

4

1 回答 1

0

我已经测试过你的代码。问题是 div 标签。

解决方案： 1.> 去掉第二个 ol 列表的 div 标签。

2.> 将两者都放在 div 标签中的 ol 列表中。

 <body>
    <div>
         <ol>
            <li>One</li>
            <li>Two
                <ol class="a">
                    <li>Two One</li>
                    <li>Two Two</li>
                    <li>Two Three</li>
                </ol>
            </li>
            <li>Three</li>
            <li>Four</li>

        </ol>
</div>


<div>
        <ol>
            <li>One</li>
            <li>Two
             <ol>
                    <li>Two One</li>
                    <li>Two Two</li>
                    <li>Two Three</li>
                </ol>
            </li>
            <li>Three</li>
            <li>Four</li>   
        </ol>
</div> 
</body>
于 2013-11-14T06:33:47.757 回答