CSS: rimozione dello spazio orizzontale nel menu elenco tramite display: proprietà in linea

Question

Sono nuovo ai CSS e ho un obiettivo prefissato di apprendimento & che pubblica il mio sito Web in CSS entro la fine del mese.

La mia domanda:

Sto cercando di costruire un menu orizzontale CSS con bassi hover goccia, tuttavia, quando uso la proprietà display: inline con li (elenco) articoli, ottengo spazi orizzontali tra l'li (lista) elementi nella barra. Come rimuovo questo spazio?

Ecco il codice HTML:

<div id="tabas_menu"> 
    <ul> 
     <li id="tabBut0" class="tabBut">Overview</li> 
     <li id="tabBut1" class="tabBut">Collar</li> 
     <li id="tabBut2" class="tabBut">Sleeves</li> 
     <li id="tabBut3" class="tabBut">Body</li> 
    </ul> 
</div> 

E qui è il CSS:

#tabas_menu { 
    position: absolute; 
    background: rgb(123,345,567); 
    top: 110px; 
    left: 200px; 
} 

ul#tabas_menu { 
    padding: 0; 
    margin: 0; 
} 

.tabBut { 
    display: inline; 
    white-space: 
    list-style: none; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,142,190,1)),to(rgba(188,22,93,1))); 
    background: -moz-linear-gradient(top, rgba(255,142,190,1), rgba(188,22,93,1)); 
    font-family: helvetica, calibri, sans-serif; 
    font-size: 16px; 
    font-weight: bold; 
    line-height: 20px; 
    text-shadow: 1px 1px 1px rgba(99,99,99,0.5); 
    -moz-border-radius: 0.3em; 
    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); 
    -webkit-border-radius: 0.3em; 
    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); 
    padding: 6px 18px; 
    border: 1px solid rgba(0,0,0,0.4); 
    margin: 0; 
} 

posso ottenere lo spazio rimosso utilizzando la proprietà float: left/right ma mi rode il motivo per cui non riesco a raggiungere il stesso effetto semplicemente usando la proprietà display.

Answer 1

Ho avuto un remarkably similar question un paio di settimane fa.

Gli spazi orizzontali sono perfettamente ragionevoli. Tra gli elementi in linea, gli spazi bianchi contano. Questo ha perfettamente senso se si considera il seguente markup in stili generici:

<b>Label:</b> <span>content</span> 

non ti sentirsi frustrati se questo soddisfare reso come la seguente?

Etichetta: contenuti

La prevalenza di elementi di blocco in HTML ci vizia nel dimenticare il ruolo di spazio bianco. Ma dobbiamo ricordare che ogni volta che si usano gli elementi inline (inclusi gli elementi di blocco in linea), lo spazio bianco nel markup conta davvero poiché HTML è fondamentalmente un markup e non un linguaggio di programmazione.

Ci sono alcune soluzioni al tuo problema (supponendo che tu voglia trattenere lo spazio bianco nell'HTML per ragioni estetiche — se questo non è importante, basta rimuovere lo spazio ed essere fatto con esso), il più semplice dei quali è quello applicare font-size: 0px al contenitore padre e quindi ripristinare la dimensione del carattere su font-size: 16px o qualunque cosa sia in ciascuno degli elementi in linea. Questo fa in modo che i nodi di testo tra di loro abbiano una dimensione del font pari a zero.

Answer 2

Il problema è che alcuni browser renderanno lo spazio bianco tra gli elementi dell'elenco. Per esempio:

<li>item 1</li> 
<li>item 2</li> 

C'è una nuova riga (e probabilmente alcune schede) dopo la </li> sulla prima riga e prima della <li> nella riga successiva. Alcuni browser Web lo renderanno come uno spazio. Esistono due soluzioni alternative.

Uno è quello di rimuovere tutti questi spazi, in questo modo:

<ul> 
    <li id="tabBut0" class="tabBut">Overview</li><li id="tabBut1" class="tabBut">Collar</li><li id="tabBut2" class="tabBut">Sleeves</li><li id="tabBut3" class="tabBut">Body</li> 
</ul> 

Questa è una sorta di brutta soluzione, ma funziona.

L'altra possibilità è quella che hai menzionato tu stesso: usa float: left. Personalmente, vado sempre con la soluzione galleggiante.

Answer 3

L'utilizzo di float:left complica il calcolo del layout per i browser. Se ti interessa la velocità e l'efficienza del rendering, rimuovi tutti gli spazi bianchi tra gli articoli <li>.

Answer 4

<html> 
<head> 
<style> 
ul li, ul li:before,ul li:after{display:inline; content:' '; } 
</style> 
</head> 
<body> 
<ul><li>one</li><li>two</li><li>three</li></ul> 
<ul> 
    <li>one</li> 
    <li>tw`enter code here`o</li> 
    <li>three</li> 
</ul> 
</body> 
</html>