Eliminare gli spazi tra le voci di una lista orizzontale

Avrete notato che Mauro Accornero, nostro lettore da tempo, è diventato anche nostro autore. Oltretutto ha aperto da poco un blog tutto suo, che a mio parere è una dispensa di perle di utilità non indifferente. Quella che vi ripropongo oggi è una cosa che succede spesso, una domanda a cui spesso mi trovo a dover rispondere sui forum e nelle mail, e Mauro molto semplicemente ce la spiega una volta per tutte:

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

    • .

Il codice per realizzare un menu orizzontale è molto semplice

    • Elemento lista

 

    • Elemento lista

 

 


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.

    • Elemento lista
    • Elemento lista

 

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{
    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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Scarica la miniguida "Creare il proprio logo"
Iscrivendoti alla newsletter riceverai la guida in pdf direttamente al tuo indirizzo email.
Guide to Million Dollar Success
My Website
Per chi inizia a muoversi nel web
Scarica la miniguida "Creare il proprio logo"
Iscrivendoti alla newsletter riceverai la guida in pdf direttamente al tuo indirizzo email.
My Website
Per chi inizia a muoversi nel web
%d blogger hanno fatto clic su Mi Piace per questo: