Prima di provare i seguenti passaggi, renditi conto che per creare un elenco a più livelli in HTML devi nidificare l'elenco in un'altra voce di elenco. Inoltre, poiché HTML ha solo un elenco puntato o un elenco numerico, se si desidera modificare il tipo di elenco, è necessario utilizzare i CSS per creare un nuovo tipo di stile.
Esempio HTML
Di seguito è riportato un esempio di come un elenco multilivello può essere eseguito in HTML utilizzando HTML e lo stile CSS definito nei tag HTML. In questo esempio, abbiamo due voci di elenco e nella seconda voce di elenco un altro elenco ordinato con un tipo di stile lista alfa inferiore per creare uno stile elenco a, b, ecc.
- Primo
- Secondo
- Secondario
- Un altro sottomarino
- Terzo
- Il quarto
Nota: nel nostro esempio sopra, stiamo usando alcuni stili di riempimento e margine aggiuntivi per adattarci ai nostri valori CSS globali e per dare un esempio di come è possibile aggiungere o ridurre lo spazio e il rientro.
Esempio di output
- Primo
- Secondo
- Secondario
- Un altro sottomarino
- Terzo
- Il quarto
Esempio CSS e HTML
La soluzione sopra funziona benissimo se hai solo bisogno di creare un elenco multilivello alcune volte. Tuttavia, se intendi disporre di più elenchi a più livelli nel tuo sito, sarebbe meglio includere il codice CSS, simile all'esempio seguente, nel file CSS. Nel nostro esempio, abbiamo creato due classi chiamate "roman" e "square" e le chiamiamo nel codice HTML.
Codice CSS
.roman {list-style-type: lower-roman;}. square {list-style-type: square; margin-left: -2em;}
Codice HTML
- Primo
- Secondo
- Secondario
- Un altro sottomarino
- Terzo
- Il quarto
Esempio di output
- Primo
- Secondo
- Secondario
- Un altro sottomarino
- Terzo
- Il quarto
Disponibili valori di tipo di stile lista-CSS
Di seguito è riportato un elenco di altri valori del tipo di stile elenco CSS che possono essere utilizzati al posto degli esempi mostrati in precedenza. Abbiamo anche incluso una breve descrizione di ciascun valore.
Nota: non tutti questi valori funzionano o appaiono uguali in tutti i browser.
disco - Piccolo cerchio solido (mostrato sopra).
circle - Piccolo cerchio vuoto (mostrato sopra).
quadrato - quadrato solido.
decimale : numero decimale che inizia con "1" (sopra riportati).
decimal-leading-zero - Numero decimale che inizia con 0 (ad es. 01, 02, 03, ecc.).
lower-roman - Minuscolo numero romano a partire da "i".
upper-roman - Numero romano maiuscolo che inizia con "I.".
basso-greco - greco minuscolo.
latino basso - latino minuscolo
latino-superiore : maiuscolo latino
armeno - Numerazione armena tradizionale
georgiano - numerazione georgiana tradizionale
lower-alpha - Lettere alfabetiche minuscole che iniziano con "a". (sopra riportati).
upper-alpha - Lettere alfabetiche maiuscole che iniziano con "A.".
nessuno - Mostra niente.