Comment créer une liste HTML 1.1, 1.2 1.3 ...?

Question

Je veux créer des listes imbriquées HTML qui a le format suivant:

1 
    1.1 
    1.2 
    1.3 
    1.4 
2 
    2.1 

J'ai essayé une solution que je trouve sur Internet:

OL { counter-reset: item } 
LI { display: block } 
LI:before { content: counters(item, ".") " "; counter-increment: item } 

Mais cela n'a pas fonctionné pour moi. Toute aide s'il vous plaît ??

Si la solution de compteur est trop compliqué, est-il un moyen de simuler l'effet de liste imbriquée, en les écrivant manuellement, mais en étant sûr que la mise en forme ressemble à une vraie liste

---

EDIT

besoin d'un soutien complet IE6

Answer 1

Cela devrait fonctionner. C'est un mauvais moyen de le faire mais si vous devez supporter IE6 pas beaucoup de choix.

 <ol> 
     <li><span>1</span> Item 
      <ol> 
      <li><span>1.1</span> Item</li> 
      <li><span>1.2</span> Item</li> 
      <li><span>1.3</span> Item</li> 
      <li><span>1.4</span> Item</li> 
      </ol> 
     </li>    
     <li><span>2</span> Item 
      <ol> 
      <li><span>2.1</span> Item</li> 
      </ol>    
     </li> 
     </ol> 

avec css

ol {list-style:none;} 

Après votre commentaire, je l'ai refait un peu.

<ol> 
    <li><span>1</span> Item 
     <ol> 
     <li><span>1.1</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li> 
     <li><span>1.2</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li> 
     <li><span>1.3</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li> 
     <li><span>1.4</span> <p>Item</p></li> 
     </ol> 
    </li>    
    <li><span>2</span> Item 
     <ol> 
     <li><span>2.1</span> Item</li> 
     </ol>    
    </li> 
    </ol> 

Et le css serait

ol {list-style:none;} 
ol li span 
{ 
    display: block; 
    float: left; 
    width: 30px; 
} 
ol li 
{ 
clear:both; 
width: 400px; 

} 
ol li p 
{ 
    float: left; 
    width: 370px; 
    margin: 0; 

} 

Vous pourriez avoir à régler la largeur.

Answer 2

fonctionne parfaitement pour moi, dans FF 3.6.6, donc:

1. Dans quel navigateur ne fonctionne-t-il pas? À quoi ressemble votre balisage (c'est-à-dire, imbriquez-vous correctement les listes)?

Answer 3

L'élément before ne fonctionne pas dans IE6, mais c'est la bonne façon de le faire. Je recommande d'utiliser IE7.js, une bibliothèque javascript qui fait IE6 se comporter comme IE7 où javascript et CSS sont concernés. Une autre façon pourrait être d'utiliser un hack javascript qui ne fonctionne que si le navigateur est IE6 et traverse de DOM en modifiant les éléments de la liste ...

En For A Beautiful Web vous trouverez plus d'informations concernant les sites compatibles IE6.

Answer 4

cette réponse est pour la première question. Je suggère d'utiliser cette méthode si vous n'allez pas sous IE8 (IE7 =>?). pour ci-dessous IE7 vous pouvez utiliser la même logique avec jquery.

Original Post de
http://www.w3schools.com/cssref/pr_gen_counter-reset.asp

CSS

ul.numeric-decimals { counter-reset:section; list-style-type:none; } 
ul.numeric-decimals li { list-style-type:none; } 
ul.numeric-decimals li ul { counter-reset:subsection; } 
ul.numeric-decimals li:before{ 
    counter-increment:section; 
    content:counter(section) ". ";/*content:"Section " counter(section) ". ";*/ 
} 
ul.numeric-decimals li ul li:before { 
    counter-increment:subsection; 
    content:counter(section) "." counter(subsection) " "; 
} 

HTML

<ul class="numeric-decimals"> 
<li>Cats</li> 
<li>Dogs 
    <ul> 
     <li>Birds</li> 
     <li>Rats</li> 
    </ul> 
</li> 
<li>Rabbits</li> 
<li>Ants 
    <ul> 
     <li>Lions</li> 
     <li>Rats</li> 
    </ul> 
</li> 
<li>Ducks</li> 

Answer 5

Cet exemple utilise l'attribut CSS spécifiques à IE6 behavior d'ajouter un marqueur statique avant chaque li. Il doit y avoir une magie spécifique à MS qui peut remplacer un tiret statique par un compteur.

Si vous voulez que ce soit une solution CSS, utilisez-le comme point de départ, puis google "MSDN".

ul.example { margin: 0.5em 0; padding: 0 0 0 2em; } 
ul.example li 
{ 
    margin: 0.5em 0; padding: 0 0 0 20px; 
    list-style-type: none; 
    behavior: expression(!this.before 
     ? this.before = this.innerHTML = '— ' + this.innerHTML : ''); 
    text-indent: -1.24em; 
} 
ul.example li:before { content: '\2014\a0'; } 

Answer 6

Vous pouvez utiliser counters de le faire:

Exemple

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

<ol> 
 
    <li>li element 
 
    <ol> 
 
     <li>sub li element</li> 
 
     <li>sub li element</li> 
 
     <li>sub li element</li> 
 
    </ol> 
 
    </li> 
 
    <li>li element</li> 
 
    <li>li element 
 
    <ol> 
 
     <li>sub li element</li> 
 
     <li>sub li element</li> 
 
     <li>sub li element</li> 
 
    </ol> 
 
    </li> 
 
</ol>