Liste des nombres décimaux

Question

est-il possible d'avoir de tels chiffres <li> ?:

1.1 First Item 
1.2 Second Item 
2.1 Other item 

Answer 1

Vous pouvez utiliser le contenu généré par CSS et compteurs, devinez cependant que le navigateur ne supporte pas ...

Si vous avez besoin d'un support général, vous devrez le faire côté serveur ou avec JavaScript.

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

http://www.evotech.net/blog/2009/05/css-content-counter-increment-counter-reset/

Answer 2

Cette page répertorie tous les types de style de liste disponibles en HTML (ainsi que la compatibilité du navigateur):

http://www.quirksmode.org/css/lists.html

Comme vous pouvez le voir, le nombre de sous-pointus ne sont pas une option supportée, donc si vous voulez le faire exactement comme vous l'avez suggéré, alors vous devrez le faire manuellement - soit en texte brut ou javascript ou possible en utilisant CSS before: (cette dernière option aurait pu être mon choix préféré, sauf qu'elle ne fonctionnera pas dans les anciennes versions de IE)

Alternativement, il suffit d'accepter que le HTML ne le supporte pas, et aller avec un schéma de numérotation alternatif qui est prise en charge. L'utilisation de listes imbriquées vous permettra d'avoir la liste extérieure numérotée 1,2,3, etc alors que la liste intérieure est numérotée I, II, III, IV, etc

Espérons que cela aide.

Answer 3

Juste pour le plaisir, ce petit jQuery snippet

$("ol").each(function(i) { 
    $(this).children("li").not(":has(ol)").each(function(n, el) { 
     $(this).prepend("<span>" + i + "." + (n+1) + " </span>"); 
    }); 
}); 

produit l'effet désiré, mais fonctionne uniquement avec 2 niveaux donnés ce type de mise en page:

<ol> 
    <li> 
     <ol> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
     </ol> 
    </li> 
    <li> 
     <ol> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
     </ol> 
    </li> 
    <li> 
     <ol> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
      <li>Four</li> 
      <li>Five</li> 
     </ol> 
    </li> 
    <li> 
     <ol> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
      <li>Four</li> 
     </ol> 
    </li> 
</ol 

Answer 4

La bonne façon de le faire est par en utilisant la propriété counter-increment CSS.
Vous pouvez définir des sections et des sous-sections "Section 1", "1.1", "1.2", etc.
http://www.w3schools.com/cssref/pr_gen_counter-increment.asp

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

    <ol> 
     <li>First level</li> 
     <li>First level 2 
      <ol> 
       <li>Second level</li> 
       <li>Second level 2 
        <ol><li>Third level</li></ol> 
       </li> 
      </ol> 
     </li>   
    </ol> 

Une autre explication: http://www.impressivewebs.com/css-counter-increment/