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.

lauryn

Web designer dal 2002, mi occupo di content marketing per la società WordSteps SLT LTD di Edimburgo e altri clienti. Vivo a Milano, sposata con una figlia e due cagnoline, e una passione per libri e Scozia. Ultimo libro uscito 4 passi per andare online e trovare nuovi clienti da subito

Rispondi

Scarica la checklist per partire con il tuo sito
Iscrivendoti alla newsletter mensile riceverai la checklist pdf alla tua casella email
Guide to Million Dollar Success
My Website
Per chi inizia a muoversi nel web
Scarica lo starter kit del professionista
Iscrivendoti alla newsletter riceverai la guida in pdf direttamente al tuo indirizzo email.
My Website
Per chi inizia a muoversi nel web
Un metodo efficace se sei un professionista che offre servizi ma sei alle prime armi con tutto ciò che riguarda il web. Ottieni indicazioni su sito web, blog, social e funnel marketing volti a portare nuovi clienti effettivi.
4 PASSI PER ANDARE ONLINE e ottenere clienti da subito
Un metodo efficace se sei un professionista che offre servizi ma sei alle prime armi con tutto ciò che riguarda il web. Ottieni indicazioni su sito web, blog, social e funnel marketing volti a portare nuovi clienti effettivi.
4 PASSI PER ANDARE ONLINE e ottenere clienti da subito
%d blogger hanno fatto clic su Mi Piace per questo: