Come eliminare gli spazi tra le voci di un menu orizzontale

Un menu orizzontale non è difficile da realizzare, dovendo restituire una lista di voci, categorie o sezioni si utilizza solitamente il tag <ul>.

Il codice per realizzare un menu orizzontale è molto semplice

<ul>
<li>Elemento lista</li>
<li>Elemento lista</li>
<li>...</li>
</ul>

Nel css invece sarà sufficiente definire un display:inline per affiancare gli elementi della lista.

li{
margin:0px;
padding:0px;
display:inline;
}

L’effetto desiderato è subito ottenuto, ovviamente in base alla grafica desiderata bisognerà tenere conto del comportamento di internet explorer nei confronti delle proprietà degli elementi in linea, le casistiche sono molteplici e verranno affrontate in un articolo a parte.

Una problematica comune a tutti i browser è invece l’aggiunta di uno spazio tra gli elementi in linea, questo comportamento nei browser non è un baco e per risolverlo di norma è sufficiente scrivere il codice html senza spazi tra gli elementi di linea.

<ul>
<li>Elemento lista</li><li>Elemento lista</li><li>...</li>
<ul>

Questa soluzione è immediata ed efficace, è però impossibile da realizzare in un contesto nel quale non è possibile modificare il codice html, ad esempio se abbiamo un cms che ci mette a disposizione delle funzioni per ritornare liste di elementi dovremmo modificare il codice html all’interno della funzione, cosa che non sempre risulta fattibile.

Per risolvere questa casistica con i css è possibile utilizzare un margine destro negativo per gli elementi <li>.

li{
margin:0 -3em 0 0;
padding:0px;
display:inline;
}

Nella regola ho utilizzato il valore di -0.3em in modo che il margine sia proporzionale al testo, è utile fare qualche prova per capire quale sia la misura ottimale da adottare a seconda della grafica delle voci e degli elementi contenuti.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli, Tutorial e contrassegnata con , . Contrassegna il permalink.

2 risposte a Come eliminare gli spazi tra le voci di un menu orizzontale

  1. Lauryn scrive:

    Grande, in molti non lo sanno.
    Credo che quei 3px siano una misura ottimale sempre, è una coincidenza che ci sia un bug di explorer per i box flottanti allineati? chissà, cmnq grazie a nome di tutti.
    Mi sa che ti farò una recensione o addirittura pubblico i feed rss su italianwebdesign perchè questi articoletti meritano tutti, dal primo all’ultimo ;)

    • Mauro Accornero scrive:

      Grazie Lauryn! Il bug dei box flottanti con un margine di 3px purtroppo è un bug di interpretazione del margine su un elemento flottante mentre questo è un comportamento corretto da parte dei browser, la misura ti confermo che è una linea di massima (molto di massima), come sempre tocca far delle prove e affondare le mani nel codice. Usando gli em come unità di misura si ha una soluzione più idonea ad un menu testuale mentre in caso di immagini i pixel sarebbero meglio. Per gli rss hai carta bianca i link sono sempre ben accetti :)

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>