Comment parvenir à la décimale la numérotation des listes ordonnées?

Avec HTML et CSS, puis-je y parvenir?

1.
1.1
1.2
2.
2.1
2.2

à l'aide de <li> et <ul> tags?

InformationsquelleAutor 78lro | 2009-06-05
  1. 13

    Pour CSS compatible navigateurs, vous pouvez utiliser:

    ul { counter-reset:item; }
ul > li { counter-increment:item; }
ul > li:before {content: counter(item); }

ul > li > ul { counter-reset:subitem; }
ul > li > ul > li { counter-increment:subitem; }
ul > li > ul > li:before { content: counter(item) "." counter(subitem); }
    InformationsquelleAutor dan richardson
  2. 8

    Il n'y a pas de croix-navigateur façon de faire.

    Le meilleur que vous pouvez obtenir est imbriquée des listes ordonnées:

    <ol>
    <li>Item 1
        <ol>
            <li>Subitem 1</li>
        </ol>
    </li>
</ol>

    et puis le style de chaque liste imbriquée à avoir un type différent:

    ol {
    list-style-type: upper-roman;
}
ol ol {
    list-style-type: decimal;
}

    Espérons que cette aide!

    InformationsquelleAutor Andrew Dunkman
  3. 1

    Envisager d'utiliser DL/DT/DD à la place de l'OL/UL et coder en dur les valeurs de la DT.

    InformationsquelleAutor richardtallent
  4. 1

    CSS 2.1 fournit définissables par l'utilisateur, les compteurs, qui peut être utilisée pour compter les éléments. Combiné avec :before et :after pseudo-classes, vous pouvez afficher la valeur du compteur de créer automatiquement des titres numérotés.

    Malheureusement, au moins Internet Explorer ne prend pas en charge de tout cela, même dans la version la plus récente. Mais au moins, Firefox prend en charge très bien, donc si vous voulez l'ajouter comme une amélioration qui n'est pas de faire de votre site inutilisable si elle n'est pas prise en charge, vous pouvez toujours l'utiliser.

    InformationsquelleAutor Simon Lehmann
  5. 1

    http://www.w3.org/TR/CSS2/generate.html

    Mais, ouais, c'est pour les navigateurs modernes seulement. Imbriquée des moindres carrés ordinaires est probablement la voie à suivre.

    InformationsquelleAutor graphicdivine
  6. 1

    Oui, cela peut être fait avec CSS Compteurs. Toutefois, il ne fonctionne pas sur tous les navigateurs.

    InformationsquelleAutor elmuerte
  7. 0

    Une seule ligne de javascript va le faire. Utilisé dans une table des matières:

    <td class="session">
<script>
{document.getElementsByClassName("session")[num].innerHTML = "1." + (++num);}
</script>
</td>

    num est une variable globale dans le document initialisé à zéro à un endroit approprié en amont. Le produit ci-dessus 1.1 lors de la première instance. Changement de num++ et obtenir 1.0.

    InformationsquelleAutor Mick536
  8. -5

    code html : 

    <ul>
  <li>1  </li>          
  <li>1.1</li>    
  <li>1.2</li>      
  <li>2  </li>                  
  <li>2.1</li>  
  <li>2.2</li>  
</ul>

    code css:

    li  {   list-style:none; }
    • HTML Incorrect, et la renumérotation automatique lors de la modification de l'ordre dans le code source est perdu avec cette réponse.
    InformationsquelleAutor Sirat Binte Siddique