Rand-Unterseite für <a> Verbindungselemente

Ich habe ein Problem mit margin-top/bottom auf <a> Elemente - es scheint nicht zu funktionieren.Rand-Unterseite für <a> Verbindungselemente

Dies ist der HTML-Code:

<div class="pages-link"> 
    <a href="#">1</a> 
    <a href="#">2</a> 
    <a href="#">3</a> 
    .... 
</div>

Dies ist der Code CSS:

.pages-link { 
    margin:2em 0; 
    word-spacing:.25em; 
} 

.pages-link a { 
    background:#d7d7d7; 
    border:1px solid #ccc; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
    -khtml-border-radius:3px; 
    border-radius:3px; 
    color:#333; 
    padding:.3em .5em; 
    text-decoration:none; 
}

Dies wird, wie das Endergebnis aussieht. Das Problem ist offensichtlich, ich möchte 5 oder 10px margin-bottom für die <a> Elemente, aber die Eigenschaft wird nicht angewendet.

enter image description here

Was bin ich?

Quelle

2012-08-15 George Grigorita

Sie müssen display: inline-block; zu Ihrem Ankerwähler hinzufügen. Anker sind definitionsgemäß Inline-Elemente und akzeptieren keine Breite, Höhe, Rand usw., bis sie als Block-Level- oder Inline-Block-Elemente definiert sind.

Quelle

2012-08-15 12:41:32 Kyle

Beachten Sie, dass die Unterstützung für 'Inline-Block' in Browsern relativ neu ist. Falls Sie ältere Browser unterstützen müssen, finden Sie unter diesem Link: http://caniuse.com/inline-block –

Wahr, glaube ich Es erschien in IE7. – Kyle

Danke für die Antwort Kyle, es funktioniert! Sune, danke für die zusätzliche Information. Ich benutze dies nur für ein Thema, das nur für Handys gedacht ist, also sollte es sicher sein. –

Ich denke, Sie sind besser, display:block; und float:left; zu tun, weil display:inline-block; nicht in allen Browsern unterstützt wird.

Quelle

2012-08-15 12:45:46

Rand-Unterseite für <a> Verbindungselemente

Antwort

Verwandte Themen