Les compteurs et étendues imbriqués HTML empêchent les listes ordonnées 1.1, 1.2 de fonctionner correctement

Question

<p> <pre class="snippet-code-css lang-css Prettyprint-override"><code>ol { compteur-reset : article ; remplissage à gauche : 10 px ; } li { bloc de visualisation } li:avant { contenu : compteurs (élément, ".") " ; contre-incrément : article }</code></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><code><ol> <li>un</li> <li>deux</li> <ol> <li>deux.un</li> <li>deux.deux</li> <li>deux.trois</li> </ol> <li>trois</li> <ol> <li>trois.un</li> <li>trois.deux</li> <ol> <li>trois.deux.un</li> <li>trois.deux.deux</li> </ol> </ol> <li>quatre</li> </ol></code></pre> <p><br /></p> <p>我期望的结果如下：</p> <pre class="brush:php;toolbar:false;">1. un 2. deux 2.1. deux un 2.2. deux.deux 2.3. deux trois 3. trois 3.1 trois.un 3.2 trois.deux 3.2.1 trois.deux.un 3.2.2 trois.deux.deux 4. quatre≪/pré>

2

0

0

P粉704066087

répondre

répondre à tous(2)

je répondrai Fermer

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

Utilisez ce style pour modifier uniquement les listes imbriquées :

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

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

Comme +0

Ajouter une réponse 关闭回复

P粉704066087

répondre

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

Décochez "Standardiser CSS" - http://jsfiddle.net/qGCUk/3/ La réinitialisation CSS utilisée ici définit les marges et le remplissage de toutes les listes à 0

UPDATE http://jsfiddle.net/qGCUk/4/ - Vous devez inclure votre sous-liste<li> dans le principal

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>

Comme +0

Ajouter une réponse 关闭回复

P粉704066087

répondre

Answer 1

Utilisez ce style pour modifier uniquement les listes imbriquées :

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

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

Answer 2

Décochez "Standardiser CSS" - http://jsfiddle.net/qGCUk/3/ La réinitialisation CSS utilisée ici définit les marges et le remplissage de toutes les listes à 0

UPDATE http://jsfiddle.net/qGCUk/4/ - Vous devez inclure votre sous-liste<li> dans le principal

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>