Nachholbedarf ist angesagt..

Am neunten Tag möchte ich euch display:inline-block näher bringen. display an sich dürfte ja allen bekannt sein.. es gibt (neben diversen anderen) display:none, display:block, display:inline und eben noch etwas dazwischen – inline-block. Wozu man das braucht und wobei es hilfreich sein kann, verrät euch der heutige Eintrag.

Browserunterstützung

Browser
ab Version	3.0	1.0	3.5	1.0	5.5

inline-block hat eine Weile gebraucht bis es sich flächendeckend bei allen Browsern durchgesetzt hat. Aktuelle Versionen unterstützen es problemlos, nur IE6 und 7 haben eine Einschränkung: Der Wert wird nur auf inline-Elemente korrekt angewendet.

Was ist nun der große Vorteil von Inline-Block-Elementen? Anders als Block-Elemente, welche standardmäßig auf die volle Breite des Elternelements aufgezogen, verhalten sich Inline-Block-Elemente wie Replaced Elements (das img-Tag wäre ein Beispiel dafür). D. h. dass sie in den Textfluss eingebunden bleiben aber dennoch dir Vorteile eines Block-Elements genießen. Dazu zählen unter anderem volle Unterstützung für Margin. Auf normale Inline-Elemente kann man beispielsweise kein Margin anwenden, das hat schlicht keinen Einfluss.

Beispiel

Oftmals wird inline-block eingesetzt, wenn man ein Grid – auf Deutsch “Gitter-Struktur” – aufbauen will, deren Zellen aufgrund ihres Inhalts eine unbekannte Höhe haben können. Nehmen wir an, wie hätten eine Liste mit sechs Elementen, diese wollen wir zu einem 3×2-Grid zusammenfügen.

HTML

1
2
3
4
5
6
7
8

<ul>
	<li>1</li>
	<li>2<br/>+</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>

Zunächst wollen wir das auf althergebrachte Art und Weise machen, mit float:

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

ul {
	border:1px solid #aaa;
	color:#fff;
	font-size:30px;
	list-style:none;
	overflow:hidden;
	padding:0 10px 10px 0;
	width:180px;
}
li {
	background:#adf;
	float:left;
	margin:10px 0 0 10px;
	padding:10px;
	text-align:center;
	width:30px;
}

Ergebnis

• 1
• 2
  +
• 3
• 4
• 5
• 6

Und da sehen wir auch schon das Problem dieser Lösung: Sobald ein Listenelement höher ist als die anderen, bringt es komplett die Reihenfolge durcheinander. Außerdem muss die Liste gecleared werden, da die Listenelemente floaten. Genau da hilft uns inline-block weiter, aber auch damit muss man zwei Dinge beachten.

1. Dadurch, dass die Elemente nun Inline-Charakter haben, werden Zeilenumbrüche, Einrückungen und Leerzeichen im Code als zu einem Leerzeichen zusammengefasst. Um dem entgegen zu wirken, brauch man nur die li-Tags hintereinander zu schreiben.
2. Ein weiterer Nachteil des Inline-Charakters ist die Tatsache, dass jetzt das Vertical-Alignment greift. Wir müssen also vertical-align:top setzen, damit die Listenelemente nach oben hin bündig zueinander sind.

HTML

1
2
3

<ul>
	<li>1</li><li>2<br/>+</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

ul {
	border:1px solid #aaa;
	color:#fff;
	font-size:30px;
	list-style:none;
	/*overflow:hidden;*/
	padding:0 10px 10px 0;
	width:180px;
}
li {
	background:#adf;
	/*float:left;*/
	display:inline-block;
	margin:10px 0 0 10px;
	padding:10px;
	text-align:center;
	width:30px;
	vertical-align:top;
}

Ergebnis

• 1
• 2
  +
• 3
• 4
• 5
• 6

Somit hätten wir ein schönes Grid, das so umbricht, wie man es von einem Grid erwartet. To be continued..