, wie die Lücke zwischen den Inline-Block-Elemente

Question

.item-list { 
 
    letter-spacing: -0.3em; 
 
} 
 
.item-list a { 
 
    letter-spacing: 0; 
 
    display: inline-block; 
 
}

<div class="item-list"> 
 
    <a href="#">a</a> 
 
    <a href="#">a</a> 
 
    <a href="#">a</a> 
 
    <a href="#">a</a> 
 
</div>

nur in Win IE6, die Lücke zwischen a entfernen noch Ausgang ist, wird der Stil letter-spacing:-0.3em wirksam machen, wenn die Art des a { letter-spacing:0 }

löschen

warum? Kann ich dieses Problem herausfinden?

Answer 1

wow das stumped mich für eine Weile ... es glauben oder nicht ist hier Ihre Antwort:

font-size: 0; muss zum übergeordneten Element hinzugefügt werden

Im Fall Ihres Beispiels würde ich die Schriftgröße der a-Tags separat definieren und "font-size: 0;"

Mit anderen Worten: auf das übergeordnete div Element:

css:

.item-Liste {letter-spacing: -0.3em; font-size: 0;}

.item-list a {Buchstabe-Abstand: 0; Anzeige: Inline-Block; font-size: Höheres;}

(auch Ihre DOCTYPE-Deklaration muss korrekt oder Anzeige inline-block sein können Probleme in IE arbeiten, zumindest hatte ich Probleme mit ihm mit IE7)

Dieser jede enden soll Extrafrand Frustration, die Sie von der Anzeige erfahren: Inline-Block;

Answer 2

Ich benutze immer:

line-height: 2.2; //or whatever value you want 

ich von Facebook-Layout nahm und arbeitet für mich erstaunlich

Answer 3

Es hat damit zu tun, wie Sie Ihre HTML sind eintippen. Weil Sie es in Ihrer IDE schön formatieren, a la, mit Leerzeichen und neuen Zeilen, erscheinen diese Leerzeichen und Zeilenumbrüche, wenn sie auf der Seite angezeigt werden. Also statt

<div class="item-list"> 

    <a href="#">a</a> 
    <a href="#">a</a> 
    <a href="#">a</a> 
    <a href="#">a</a> 

</div> 

Typ es aus wie eine Linie, und sie gehen weg:

<div class="item-list"><a href="#">a</a><a href="#">a</a><a href="#">a</a><a href="#">a</a></div> 

Answer 4

Sie diese CSS hinzufügen

a{float:left} 

Gap