简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

Listes imbriquées dans différents styles

Le HTML et les listes sont un nouveau niveau pour moi, j'essaie de créer une liste imbriquée en HTML avec des numéros associés et en utilisant des types alphanumériques au troisième niveau. 

body {
  padding-left: 100px;
}

ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}

ol>li {
    display: table;
    counter-increment: item;
    margin-bottom: 0.6em;
}

ol>li:before {
    content: counters(item, ".",decimal-leading-zero) ". ";
    display: table-cell;
    padding-right: 0.6em;
}

li ol>li {
    margin: 0;
}

li ol>li:before {
    content: counters(item, ".",decimal-leading-zero) " ";
}
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Ce qui précède est mon code. Les résultats sont les suivants : 

01.
  01.01
  01.02
  01.03
02.
03.
04.
  04.01
  04.02
      04.02.01
      04.02.02
      04.02.03

Mais ce que je veux c'est : 

01.
  01.01
  01.02
  01.03
02.
03.
04.
  04.01
  04.02
        a.  ←
        b.  ←
        c.  ←
  04.03

Est-ce que quelqu'un sait comment résoudre ce problème ?

J'ai essayé des solutions numériques et effectué des recherches sur le Web. C'est ainsi que je suis arrivé à la solution ci-dessus. Mais je ne trouve pas de solution de style pour le type minuscule du troisième niveau.

P粉998920744P粉998920744185 Il y a quelques jours286

répondre à tous(2)je répondrai

  • P粉033429162

    P粉0334291622024-04-01 13:38:08

    Le moyen le plus simple consiste à modifier les éléments de votre liste de troisième niveau en éléments de liste, à masquer le contenu et à utiliser un style de liste avec des lettres minuscules : 

    ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol>li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol>li:before {
  content: counters(item, ".", decimal-leading-zero) ". ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol>li {
  margin: 0;
}

li ol>li:before {
  content: counters(item, ".", decimal-leading-zero) " ";
}

/* 下面的样式添加，其他内容不变 */

ol ol ol {
  list-style-type: lower-alpha;
}

ol ol ol li {
  display:list-item;
  margin-left: 1em;
}
ol ol ol li:before {
  content: none;
}
    <ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

    répondre
    0
  • P粉488464731

    P粉4884647312024-04-01 13:27:34

    Veuillez vérifier le code de fonctionnement ci-dessous : 

    ol {
        list-style-type: none;
        counter-reset: item;
        margin: 0;
        padding: 0;
    }

    ol>li {
        display: block;
        counter-increment: item;
        margin-bottom: 0.6em;
        padding-left: 15px;
    }

    ol>li:before {
        content: counters(item, ".",decimal-leading-zero) ". ";
        display: table-cell;
        padding-right: 0.6em;
    }

    li ol>li {
        margin: 0;
    }

    li ol>li:before {
        content: counters(item, ".",decimal-leading-zero) " ";
    }
    
    ol>li>ol>li>ol
    {
    counter-reset: listStyle;
    }
    
        ol>li>ol>li>ol li{
  margin-left: 1em;
  counter-increment: listStyle;
}
        
        ol>li>ol>li>ol li::before {
  margin-right: 1em;
  content: counter(listStyle, lower-alpha);
}
    <html>

<head>

</head>

<body>

</body>
<ol>
    <li>
      <ol>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </li>
    <li></li>
    <li></li>
    <li>
      <ol>
        <li></li>
        <li>
          <ol>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</body>

</html>

    répondre
    0
  • Annulerrépondre