Türchen #9: display:inline-block

von

Nachholbedarf ist angesagt..

Türchen #9 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 Firefox Safari Opera Chrome Internet Explorer
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..

Die hier könnten dich auch interessieren…

Kommentieren