search

Home  >  Q&A  >  body text

HTML nested counters and scopes cause ordered lists 1.1, 1.2 not to work properly

<p>我使用嵌套计数器和作用域来创建有序列表:</p> <pre class="snippet-code-css lang-css prettyprint-override"><code>ol { counter-reset: item; padding-left: 10px; } li { display: block } li:before { content: counters(item, ".") " "; counter-increment: item }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><ol> <li>one</li> <li>two</li> <ol> <li>two.one</li> <li>two.two</li> <li>two.three</li> </ol> <li>three</li> <ol> <li>three.one</li> <li>three.two</li> <ol> <li>three.two.one</li> <li>three.two.two</li> </ol> </ol> <li>four</li> </ol></code></pre> <p><br /></p> <p>我期望的结果如下:</p> <pre class="brush:php;toolbar:false;">1. one 2. two 2.1. two.one 2.2. two.two 2.3. two.three 3. three 3.1 three.one 3.2 three.two 3.2.1 three.two.one 3.2.2 three.two.two 4. four</pre> <p>但实际上,我看到的是<strong>(错误的编号)</strong>:</p> <pre class="lang-html prettyprint-override"><code>1. one 2. two 2.1. two.one 2.2. two.two 2.3. two.three 2.4 three <!-- 这是出错的地方,当返回到父级时 --> 2.1 three.one 2.2 three.two 2.2.1 three.two.one 2.2.2 three.two.two 2.3 four </code></pre> <p>我不知道,有人看出哪里出错了吗?</p> <p>这是一个JSFiddle链接:http://jsfiddle.net/qGCUk/2/</p>
P粉704066087P粉704066087582 days ago526

reply all(2)I'll reply

  • P粉764836448

    P粉7648364482023-08-22 20:00:10

    Use this style to only change nested lists:

    ol {
        counter-reset: item;
    }
    
    ol > li {
        counter-increment: item;
    }
    
    ol ol > li {
        display: block;
    }
    
    ol ol > li:before {
        content: counters(item, ".") ". ";
        margin-left: -20px;
    }

    reply
    0
  • P粉141911244

    P粉1419112442023-08-22 14:47:16

    Uncheck "Standardize CSS" - http://jsfiddle.net/qGCUk/3/ The CSS reset used in this sets the margins and padding of all lists to 0

    UPDATE http://jsfiddle.net/qGCUk/4/ - You must include your sublist in the main <li>

    ol {
      counter-reset: item
    }
    li {
      display: block
    }
    li:before {
      content: counters(item, ".") " ";
      counter-increment: item
    }
    <ol>
      <li>one</li>
      <li>two
        <ol>
          <li>two.one</li>
          <li>two.two</li>
          <li>two.three</li>
        </ol>
      </li>
      <li>three
        <ol>
          <li>three.one</li>
          <li>three.two
            <ol>
              <li>three.two.one</li>
              <li>three.two.two</li>
            </ol>
          </li>
        </ol>
      </li>
      <li>four</li>
    </ol>

    reply
    0
  • Cancelreply