Come creare un elenco a più livelli in HTML

La creazione di un elenco a più livelli in HTML è più difficile rispetto alla creazione di un elenco a più livelli in un elaboratore di testi, ma può comunque essere ottenuto utilizzando HTML e CSS. Di seguito sono riportati i passaggi su come creare un elenco a più livelli in HTML con l'aiuto di CSS.

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.

  1. Primo
  2. Secondo
    1. Secondario
    2. Un altro sottomarino
  3. Terzo
  4. 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

  1. Primo
  2. Secondo
    1. Secondario
    2. Un altro sottomarino
  3. Terzo
  4. 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.