2010-09-09 4 views
1

J'ai un document de modalités que je souhaite placer sur mon site Web, qui comprend un certain nombre de sous-titres avec des puces sous ces sous-titres.Liste de commande continue

En HTML, je veux faire ces puces dans une liste ordonnée dans chaque sous-section, ce qui semble bien fonctionner, mais comment puis-je porter la numérotation de sorte que de la première liste ordonnée à la dernière, les numéros commencent à partir de 1 et continuent à droite à N?

Pour le moment, je dois créer pour chaque sous-section, une étiquette de liste ordonnée ouverte et fermée, donc je n'ai jamais une liste incrémentale du début à la fin.

Merci.

Répondre

4

Donnez à la première liste triée un style CSS qui inclut counter-reset: chapter et attribuez à toutes les listes suivantes un style incluant counter-increment: chapter. Édité pour ajouter: Ma compréhension n'était pas complète Le truc "counter" ne fonctionne qu'avec l'attribut CSS "content", qui insère le contenu généré. La solution doit donc utiliser cet attribut. Malheureusement, ce qui est pris en charge uniquement dans Internet Explorer à partir de la version 8.

<html> 
<style type="text/css"> 

#firstList { 
    counter-reset: chapter; 
} 
li{ 
    list-style-type:none; 
    counter-increment: chapter; 
} 
li:before { 
    content:counter(chapter) ". "; 
} 
</style> 
<ul id="firstList"> 
    <li>first item</li> 
    <li>second item</li> 
    <li>third item</li> 
</ul> 
<p>intermediate text</p> 
<ul> 
    <li>fourth item</li> 
    <li>fifth item</li> 
    <li>sixth item</li> 
</ul> 
</html> 
+0

solution rapide et élégante, pas beaucoup de gens savent comment utiliser le compteur –

+0

Bonjour @JacobM - malheureusement, j'ai essayé cela et n'a pas pu obtenir cela pour mon exigence. Êtes-vous capable de fournir un exemple de ceci à http://jsfiddle.net/ basé sur mon exigence? Merci. – tonyf

+0

Ouais, ma compréhension n'était pas complète. Edité pour développer et ajouter un exemple. –

1

C'est l'une des raisons pour lesquelles HTML5 permet à l'start nouveau l'attribut:

<h1>1</h1> 
<ol> 
    <li>... 
    <li>... 
    <li>... 
</ol> 
<h1>2</h1> 
<ol start=4> 
    <li>... 
    <li>... 
    <li>... 
</ol> 

Vous aurez besoin de les mettre à jour si vous ajoutez ou supprimez un élément, mais cela ne devrait pas être trop commun dans un TdC.