Visualizzare una lista in senso orizzontale

3 maggio 2011

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.

Tutte le lezioni

1 ... 41 42 43 ... 49

Se vuoi aggiornamenti su Visualizzare una lista in senso orizzontale inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Visualizzare una lista in senso orizzontale

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing