Howtoweb.it

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.

Tag: css, wordpress