• Passa alla navigazione primaria
  • Passa al contenuto principale

Arch. Mattia Frigeri

Web Design Parma - Siti Internet Parma - Grafica Parma

  • Chi siamo
  • Portfolio
  • Articoli
    • Web
    • Grafica
    • WordPress
    • Libri
  • Corsi Web Design
  • Contatti

Web · Febbraio 2, 2014

Eliminare lo spazio tra gli elementi inline di un elenco o di un menu di navigazione

Hai mai osservato uno strano spazio tra gli elementi inline di un menu di navigazione o di una lista (di testo o di immagini)? Se sì, tranquillo: non si tratta di un bug del tuo browser, ma del normale comportamento di elementi inline che si allineano su una riga.

Spazio tra gli elementi inline di una lista

Fig. 1: Lo spazio che si crea tra gli elementi inline di una lista

Per capirci meglio:


<ul>
    <li>uno</li>
    <li>due</li>
    <li>tre</li>
</ul>

CSS:


ul li {

    display: inline;
}

Accade infatti come con le parole nel testo: tra di loro si crea sempre almeno uno spazio. Qui, ogni elemento <li> della lista va a capo (o crea un “tab” di indentazione), imponendo al browser l’inserimento di una spaziatura. Elimina quindi quello spazio, e il problema sarà risolto.

Diverse soluzioni!

L’escamotage più elegante è comprimere il codice HTML con un tool apposito. In alternativa, puoi sfruttare uno di questi “trucchetti”:

Usa i commenti:


<ul>
    <li>uno</li><!--
 --><li>due</li><!--
 --><li>tre</li>
</ul>

Allinea “drasticamente” i tag (a scapito della lettura):


<ul>
    <li>uno</li><li>due</li><li>tre</li>
</ul>

Imposta un margine negativo nel CSS: solitamente corrisponde a -4px, ma potrebbe variare a seconda delle dimensioni del font che stai utilizzando (questa soluzione può creare qualche problema con IE6 e IE7).


ul li {

    display: inline;
    margin-right: -4px;
}

Sfrutta HTML5, che non impone l’obbligo di chiudere gli elementi <li> nelle liste:

“An <li> element’s end tag may be omitted if the <li> element is immediately followed by another <li> element or if there is no more content in the parent element.”

W3C

Cioè:


<ul>
    <li>uno
    <li>due
    <li>tre
</ul>

Al posto di display: inline; usa la proprietà float: left;. Non solo non si creerebbero quegli spazi fastidiosi tra gli elementi, ma avresti più libertà nel gestirne le dimensioni sfruttando i valori width e height.

Riferimenti

  • Elementi inline (W3C)
  • Tool di compressione per il codice HTML
  • Tag <li> in HTML5
  • Sostanziali differenze tra elementi inline e block

Archiviato in:Web Contrassegnato con: inline, li, menu, tag, tags

Post precedente: « Inserire un video full screen come sfondo di un sito con il plugin jQuery tubular
Post successivo: WordPress: tutorial e trucchi per rendere sicuro il tuo sito (#1) »

  • © 2008-2022 Studio Arch. Mattia Frigeri
  • Via Giuseppe Romita 4, 43123 Parma (PR)
  • Tel. 339/7547430 - Email: arch.mattiafrigeri@gmail.com
  • P.I. 02542140344
  • Privacy Policy - Cookie Policy - Aggiorna preferenze Consenso