Visualizzare una lista in senso orizzontale

Nell'HTML gli elementi di una lista (list item) sono visualizzati come oggetti di tipo block e, di conseguenza, visualizzati uno per riga.

Questi elementi, però, possono essere utilizzati come voci di un menu orizzontale e, a quel punto, si ha la necessità di allineare gli oggetti su un'unica riga.

Ci sono due modi per visualizzare orizzontalmente gli elemento di una lista (ordinata o non ordinata), scopriamoli insieme.

Modificare il valore della proprietà display

Come anticipato all'inizio della lezione, di default questi elementi hanno la proprietà display con valore block. È sufficiente quindi modificare questo valore impostandolo su inline per allineare gli elementi su un'unica riga.

Partendo da una lista come la seguente:

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contacts</a></li>
</ul>

possiamo applicare la regola:

ul#menu li {
    display: inline;
}

Esempio.

Modificare il valore della proprietà float

Un altro metodo consiste nel modificare il valore della proprietà float. Inizialmente il valore è settato su none, ma possiamo impostarlo su left per visualizzare la lista degli elementi orizzontalmente.

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

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

Esempio.