HTML/CSS Outline numerazione

Question

In html/css posso raggiungere questo obiettivo?

1. 
1.1 
1.2 
2. 
2.1 
2.2 

utilizzando tag LI e UL?

Answer 1

Sì, si veda: https://developer.mozilla.org/en/CSS_Counters Ma non funziona su tutti i browser/

Answer 2

Non c'è modo cross-browser di farlo.

Il meglio che si può ottenere è annidato elenchi ordinati:

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

e poi lo stile di ogni lista annidata di avere un diverso tipo:

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

Spero che questo aiuti!

Answer 3

Considerare l'utilizzo di DL/DT/DD anziché OL/UL e codificare i valori nel DT.

Answer 4

CSS 2.1 fornisce contatori definibili dall'utente, che possono essere utilizzati per contare gli elementi. Combinato con le pseudo-classi: before e: after, puoi generare il valore del contatore per creare titoli numerati automaticamente.

Sfortunatamente, almeno Internet Explorer non supporta nulla di tutto ciò, anche nell'ultima versione. Ma almeno Firefox lo supporta molto bene, quindi se vuoi semplicemente aggiungerlo come un miglioramento che non rende il tuo sito inutilizzabile se non è supportato, puoi ancora usarlo.

Answer 5

Per CSS2 compatibile con il browser di è possibile utilizzare

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); } 

Answer 6

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

Ma, sì, questo è solo per i browser moderni. Gli OL nidificati sono probabilmente la strada da percorrere.

Answer 7

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

codice CSS:

li { list-style:none; } 

Answer 8

Una linea di javascript farà questo. Utilizzato in una tabella dei contenuti:

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

num è una variabile globale nel documento inizializzato a zero in un luogo appropriato monte. Quanto sopra produce 1.1 in prima istanza. Passare a num ++ e ottenere 1.0.