equidistanti, giustificati link nav orizzontali: come rimuovere spazio verticale nel vuoto: dopo il contenuto

Question

che sto cercando di realizzare collegamenti orizzontali di navigazione come questa:

|--------------------------------------| 
|Link1 L2 LongLink3 Link4 Link5| 
|--------------------------------------| 

Regole:

• link sono distanziati uniformemente (stessa quantità di spazio bianco tra ciascun collegamento)
• I collegamenti possono essere a larghezza variabile
• Collettivamente i collegamenti si estendono sull'intera larghezza disponibile del contenitore ir
• primo e l'ultimo collegamenti sono allineati con le eges del loro contenitore (i link sono giustificate)
• Opere su IE8 +
• CSS/soluzione HTML, senza JavaScript
• Non può impostare l'altezza del contenitore specifico o altezza collegamento
• non può pre-calcolare e hard-code lo spazio tra le maglie (numero di link potrebbe cambiare in seguito)

This solution quasi opere - è così vicino. Ma introducendo il vuoto: dopo che il contenuto aggiunge uno spazio verticale addizionale indesiderato nel contenitore nav (perché?). C'è un modo per rimuovere lo spazio verticale extra iniettato dal vuoto: dopo il contenuto?

HTML che quasi funziona:

<ul id="nav"> 
    <li><a href="#">HOME</a></li> <!-- 
    --><li><a href="#">ABOUT</a></li> <!-- 
    --><li><a href="#">BASIC SERVICES</a></li> <!-- 
    --><li><a href="#">OUR STAFF</a></li> <!-- 
    --><li><a href="#">CONTACT US</a></li><!-- 
--></ul><!-- 
--><h2>next element</h2> 

CSS che quasi funziona:

* { 
    padding: 0; 
    margin: 0; 
} 
#nav { 
    text-align: justify; 
    outline: 1px solid grey; 
} 
#nav:after { 
    content: ''; 
    display: inline-block; 
    width: 100%; 
} 
#nav li { 
    display: inline-block; 
    background-color: green; 
} 
#nav a:link { 
    display: block; 
    color: white; 
    padding: 1em 0; 
} 

jsfiddle mostrando ciò che questo sembra, così come lo spazio verticale aggiuntivo iniettato dal: dopo il contenuto. Il "prossimo elemento" dovrebbe essere direttamente sotto i collegamenti nav. Grazie.

Answer 1

Strano problema.

Presumo che abbia qualcosa a che fare con il fatto che gli elementi in linea rispettano gli spazi bianchi nel markup, sebbene lo spazio bianco sia necessario per text-align:justify per funzionare, quindi non può essere rimosso.

Poiché lo spazio è determinato dalle dimensioni del carattere, è possibile impostare il numero font-size del genitore su 0 e quindi impostare il valore font-size per bambini. Funziona .. jsFiddle example

#nav { 
    text-align: justify; 
    outline: 1px solid grey; 
    font-size:0; 
} 
#nav li { 
    display: inline-block; 
    background-color: green; 
    font-size:16px; 
} 

Non posso pensare a niente di meglio al momento. Ti farò sapere se lo faccio.

Answer 2

Ho trovato che aggiungendo la dimensione del carattere: 0; al selettore UL lo spezza in IE10.

Answer 3

Il trucco è legata al ul#nav:after pseudo-elemento:

#nav:after { 
    content: ''; 
    display: inline-block; 
    width: 100%; 
} 

Questo inserisce un ulteriore elemento all'interno del nav che ha l'intera larghezza del contenitore che stiamo cercando di riempire (l'antenato più vicino con position: relative). Questo imposta la larghezza di ul#nav in modo che text-align: justify crei l'effetto di spaziatura desiderato.

Lo spazio finale è l'altezza dello psuedo-elemento ul#nav:after. L'impostazione di su ul#nav (come per la risposta di @Josh Crozier) è un modo indiretto di forzare l'altezza della riga a 0. Questo metodo non funziona in IE per qualche motivo, ma l'impostazione dell'altezza della linea sembra funzionare direttamente in Chrome, FF, IE10 +. Non ho provato sotto IE10, ma mi aspetto che funzioni almeno fino a IE8. Ecco la soluzione completa:

* { 
    padding: 0; 
    margin: 0; 
} 
#nav { 
    text-align: justify; 
    outline: 1px solid grey; 
    line-height: 0; 
} 
#nav:after { 
    content: ''; 
    display: inline-block; 
    width: 100%; 
} 
#nav li { 
    display: inline-block; 
    background-color: green; 
    line-height: 100%; 
} 
#nav a:link { 
    display: block; 
    color: white; 
    padding: 1em 0; 
}