Warum sind die Abstimmungsschaltflächen in StackOverflow auf verschiedenen Zeilen?

Question

Die Abstimmungsschaltflächen haben lediglich ein img-Tag, ein span-Tag und ein weiteres img-Tag. Wenn ich diese auf einer neuen Seite ausprobiere, erscheinen sie in derselben Zeile. Welches CSS-Element genau verursacht, dass sie in verschiedenen Zeilen stehen?

<img class="vote-up" width="40" height="25" title="This question is useful and clear (click again to undo)" alt="vote up" src="http://sstatic.net/so/img/vote-arrow-up.png"/>
<span class="vote-count-post" title="View upvote and downvote totals" style="cursor: pointer;"> 0 </span>
<img class="vote-down" width="40" height="25" title="This question is unclear or not useful (click again to undo)" alt="vote down" src="http://sstatic.net/so/img/vote-arrow-down.png"/>

Answer 1

Sie beantragen display:block zu allen drei Punkten. Dies ist wichtig, weil img y span Elemente sind Inline standardmäßig, im Gegensatz zu p y div Tags, die Block Elemente standardmäßig.

Elemente, die display:block nehmen standardmäßig den gesamten Raum von links nach rechts ein und bleiben in ihrer eigenen Zeile, während sie andere Elemente in die nächste Zeile verschieben. Selbst wenn eine Breite angewendet wird, die ihre Größe begrenzt, bleiben sie auf ihrer eigenen Zeile, es sei denn, Sie ändern die position zu absolut oder float das Element.

Answer 2

display:block;

Elemente auf Blockebene sind die Elemente des Quelldokuments, die visuell als Blöcke formatiert sind (z. B. Absätze). Mehrere Werte der der Eigenschaft "display" machen ein Element Block-Ebene: 'block', 'list-item', und 'run-in' (teilweise; siehe run-in Boxen) und 'table'.

Elemente auf Blockebene (außer für Anzeige-'Tabellen'-Elemente, die in einem späteren Kapitel beschrieben) erzeugen eine Hauptblockbox, die Folgendes enthält entweder nur Blockboxen oder nur Inline Boxen enthält. Der Hauptblockrahmen legt den enthaltenden Block fest für abhängige Boxen und generierten Inhalt und ist auch der Rahmen, der in jedem Positionierungsschema. Hauptblock Boxen nehmen an einem Block Formatierungskontext teil.

http://www.w3.org/TR/CSS21/visuren.html