Question

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

如果页面上有多个OL，并使用普遍接受的嵌套编号解决方案（请参阅：Html ordered list 1.1, 1.2 (Nested counters and scope) not working），则当第二个OL位于div标记内时，编号将从之前的OL继续。< / p>

<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的计数器重置。

Answer 1

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

解决方案： 1.＆GT;删除第二个ol列表的div标签。

2＆GT;将两者放在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>

页面上有多个嵌套的ol和奇怪的行为

1 个答案: