Con alcuni parametri CSS si possono preparare delle liste orizzontali e liste verticali con il tag LI.
Interessante soprattutto nel caso che si voglia visualizzare un menu in formato orizzontale o verticale.
Una lista si visualizza orizzontalmente introducendo il parametro “display: inline;” nel file CSS.
La lista in formato HTML con il bordo
La lista visualizzata in un browser con il bordo
Le voci del menu vengono divise tra loro da una linea colorata orizzontale o verticale, a seconda del menu. In questo modo l’ultima voce del menu riceve anche una linea che rimane quasi sola nel vuoto.
Come soluzione si prepara una classe (in questo caso: “noline“) con la quale si indica “border= 0px” e la si introduce nel tag LI dell’ultima voce del menu.
La lista in formato HTML senza bordo
La lista visualizzata in un browser senza bordo
Di seguito una parte del file CSS con le proprietà del menu verticale:
I parametri CSS con bordo per il menu verticale
Di seguito una parte del file CSS con le proprietà del menu orizzontale:
I parametri CSS con bordo per il menu orizzontale
Articoli correlati: