Come Mostrare una Lista in Orizzontale

Visualizzazione Orizzontale degli Elementi di una Lista in HTML:

Nel linguaggio HTML, gli elementi di una lista (list item) sono di default visualizzati come oggetti di tipo block e, di conseguenza, appaiono uno per riga. Tuttavia, esiste la necessità di allineare questi elementi su una singola riga, ad esempio, quando vengono utilizzati come voci di un menu orizzontale. Esistono due modi principali per ottenere questa visualizzazione, e li esploreremo insieme.

1. Modifica del Valore della Proprietà “display”: Come accennato all’inizio della lezione, di default questi elementi hanno la proprietà “display” con il valore “block”. È sufficiente modificare questo valore impostandolo su “inline” per allineare gli elementi su una singola riga.

Partendo da una lista come quella seguente:

Possiamo applicare la regola CSS:

• Esempio:
  cssCopy code

  ul#menu li { display: inline; }

2. Modifica del Valore della Proprietà “float”: Un altro metodo consiste nel modificare il valore della proprietà “float”. Inizialmente, il valore è impostato su “none”, ma è possibile cambiarlo su “left” per visualizzare la lista degli elementi orizzontalmente.

Sulla stessa lista puntata dell’esempio precedente, possiamo applicare la seguente regola:

• Esempio:
  cssCopy code

  ul#menu li { float: left; list-style: none; padding: 0 2px; }

In entrambi gli esempi, si fornisce una soluzione efficace per ottenere una disposizione orizzontale degli elementi di una lista HTML, consentendo una maggiore flessibilità nell’organizzazione di menu e contenuti simili.