Come creare un elenco HTML 1.1, 1.2 1.3 ... HTML?

Question

Voglio creare HTML liste nidificate che ha il seguente formato:

1 
    1.1 
    1.2 
    1.3 
    1.4 
2 
    2.1 

ho provato una soluzione che ho trovato su internet:

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

Ma non ha funzionato per me. Qualche aiuto per favore ??

Se la soluzione contatore è troppo complicato, c'è un modo di falsificare l'effetto lista annidata, scrivendo manualmente, ma con la certezza che la formattazione si presenta come una vera e propria lista

---

EDIT

bisogno di un supporto completo IE6

Answer 1

Questo dovrebbe funzionare. È un brutto modo per farlo, ma se DEVI supportare IE6 non c'è molta scelta.

 <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> 

con i CSS

ol {list-style:none;} 

Dopo il tuo commento ho rifatto un po '.

<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> 

E il CSS sarebbe

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; 

} 

potrebbe essere necessario regolare le larghezze.

Answer 2

funziona perfettamente per me, in FF 3.6.6, quindi:

1. In quale browser non funziona?
2. Che aspetto ha il tuo markup (ad esempio, stai annidando correttamente gli elenchi)?

Answer 3

L'elemento before non funziona in IE6, ma è il modo corretto di farlo. Ti consigliamo di utilizzare IE7.js, una libreria javascript che fa sì che IE6 si comporti come IE7 in cui sono interessati javascript e CSS. Un altro modo potrebbe essere utilizzare un hack javascript che viene eseguito solo se il browser è IE6 e attraversa il DOM modificando gli elementi dell'elenco ...

In For A Beautiful Web è possibile trovare ulteriori informazioni sui siti Web compatibili con IE6.

Answer 4

questa risposta è per la prima domanda. Ti suggerisco di usare questo metodo se non stai andando sotto IE8 (IE7 =>?). per sotto IE7 puoi usare la stessa logica con jquery.

originale Post da
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

questo esempio viene utilizzato l'attributo CSS IE6 specifico behavior per aggiungere un marker statica prima di ogni li. Ci deve essere qualche magia specifica per MS che possa sostituire un trattino statico con un contatore.

Se si desidera che sia una soluzione CSS, utilizzare questo come punto di partenza e quindi "MSDN" di Google.

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

È possibile utilizzare counters per farlo:

Esempio

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>