Warum Inhalt des Inline-Block wirkt sich auf seine Position in dem Behälter

Here's a fiddle that shows my code in action Warum Inhalt des Inline-Block wirkt sich auf seine Position in dem Behälter

Das Ergebnis für mich verrückt scheint: in Chrome zweite Taste ist leicht über dem ersten. In Firefox ist es etwas darunter.

<div id="accounts"> 
    <button class="account"> 
    <h1>VISA Card</h1> 
    <span class="balance">-433.18</span> 
    </button> 
    <button class="account"> 
    <h1 class="plus"><i class="icon icon-plus-sign"></i></h1> 
    <span class="plus-text">Add Account</span> 
    </button> 
</div>

Was noch verwirrender ist, dass Polsterung auf der h1.plus die Position des gesamten div auswirkt.

Was geht hier vor? Ich möchte, dass zwei Buttons in derselben Zeile erscheinen und einfach nicht verstehen, warum sie nicht sind. Ist das ein Fehler in der Rendering-Engine?

UPDATE: Narendra schlug eine einfache Lösung - float: left die Tasten. Ich möchte herausfinden, warum diese Fehlausrichtung überhaupt passiert ist.

Quelle

2013-06-27 Paul

Sie verwenden display:inline-block, so dass die Tasten sind durch ihre vertical-align Eigenschaft ausgerichtet sind, die standardmäßig auf baseline.

Dies ist ein Diagramm, aus dem specs, die genau das zeigt: Sie können die in den ersten beiden Boxen sehen

enter image description here

wie Polsterung und die Schriftgröße des Inhalts die Positionierung beeinflussen.

Verwenden Sie als Fix vertical-align: top oder bottom oder sogar middle.

bearbeiten: Das Bild ist aus dem Tabelle Abschnitt und the situation ist slighty anders für die Inline-Blöcke.

Quelle

2013-06-27 07:29:16 user123444555621

Das muss es sein. Danke für das Wiegen in. Grundlinie der Zelle wird durch ihren Inhalt bestimmt. Spec sagt" Die Grundlinie einer Zelle ist die Grundlinie der ersten Zeile des Textes in der Zelle "obwohl nach einige Experimente Ich bin nicht davon überzeugt, dass es der Fall ist Unterschied zwischen FF und Chrome wurde durch verschiedene Standard-Button-Stile in zwei Browsern verursacht – Paul

@Paul Nicht ganz. Ich verlinkt auf die * Tabelle * Abschnitt der Spezifikation, weil es eine nette enthält Die Situation ist jedoch etwas anders [für Inline-Blöcke] (http://www.w3.org/TR/CSS2/visudet.html#leading): "* Die Grundlinie eines 'Inline-Blocks' ist der Basislinie der letzten Zeile im normalen Ablauf, es sei denn, es sind keine In-Flow-Zeilen vorhanden oder die Eigenschaft "Überlauf" hat einen anderen berechneten Wert als "sichtbar". In diesem Fall ist die Basislinie die untere Randkante. * "Siehe auch dieses Beispiel: http://jsfiddle.net/Gq3U8/26/ – user123444555621

@ user123444555621, dies ist eines von t Die besten Fragen, die ich je hatte. Danke, es hat mir wirklich geholfen! – gnclmorais

prüfen Code unten

button.account { 
    display: block; 
    float: left; 
    height: 80px; 
    margin: 10px 10px; 
    padding: 10px 5px; 
    width: 170px; 
} 
.account h1 { 
    font-size: 16px; 
    height: 16px; 
    margin: 0 0 5px; 
    padding: 4px 0 2px; 
} 
.account .balance { 
    display: block; 
    font-size: 24px; 
} 

.account h1.plus { 
    font-size: 24px; 
    padding-top: 0px; 
}

ist die Geige http://jsfiddle.net/Gq3U8/13/

Quelle

2013-06-27 03:38:07 Narendra

Danke, ich habe mit Ihrem Code ein wenig experimentiert, und nur ändern notwendig ist float: links ;. Irgendwelche Ideen, warum es ohne es nicht funktioniert? – Paul

float: left macht die Elemente von der linken Seite des Fensters angeordnet. – Narendra

Ich weiß was float: links tut. Aber warum funktioniert es nicht ohne? Ein Problem mit Float ist, dass sie den Container nicht dehnen. Fügen Sie den div # -Konten oder einigen Inhalten am unteren Rand der Seite einen Rahmen hinzu und Sie werden sehen, wie die Dinge auseinander fallen. – Paul

diese in Ihre button.account: vertical-align: middle;.

Und Sie können die display: inline-block; Eigenschaft verlieren, da es nicht benötigt wird.

Quelle

2013-06-27 04:01:33 Gimmy

vertical-align: Mitte gearbeitet, danke. Andere Option ist ".Konto * {Zeilenhöhe: 20px; } "Aber warum? – Paul

-1

Wenn Sie inline-block verwenden, geht es hauptsächlich um den Leerraum (Sie sehen den Standardrand um das Element herum). Um dies zu beheben, fügen Sie einfach vertical-align:top statt float:left hinzu. Es richtet das Element nach oben aus.

.account { 
    display: inline-block; 
    vertical-align: top; /*add this one*/ 
    margin: 10px 10px;  /*remove this one then can see whitespace*/ 
}

Quelle

2013-06-27 06:14:31

Warum Inhalt des Inline-Block wirkt sich auf seine Position in dem Behälter

Antwort

Verwandte Themen