CSS - Inline-Block: Ein umfassender Leitfaden für Anfänger
Hallo da draußen, angehende Webentwickler! Heute tauchen wir in die wunderbare Welt von CSS Inline-Block ein. Als dein freundlicher Nachbar-Computerlehrer werde ich dich Schritt für Schritt durch dieses Konzept führen, mit vielen Beispielen, damit es kristallklar wird. Also hole dir dein lieblingsgetränk, setze dich bequem hin und lassen wir gemeinsam diese aufregende Reise antreten!
Was ist Inline-Block?
Bevor wir uns in die Details vertiefen, lassen wir uns darstellen, was Inline-Block ist. Stell dir vor, du richtest Bücher auf einem Regal an. Manche Bücher möchtest du stehen lassen (wie Inline-Elemente) und manche flach legen (wie Block-Elemente). Aber was, wenn du ein Buch stehen lassen und gleichzeitig einen bestimmten Platz einnehmen lassen möchtest? Genau hier kommt Inline-Block ins Spiel!
Die CSS-Eigenschaft display: inline-block kombiniert Merkmale von Inline- und Blockelementen. Sie ermöglicht es Elementen, nebeneinander zu sitzen, wie Inline-Elemente, aber respektiert auch die Eigenschaften Breite und Höhe, wie Blockelemente.
Schauen wir uns ein einfaches Beispiel an:
<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #3498db;
}
</style>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>In diesem Beispiel haben wir drei div-Elemente mit der Klasse inline-block-element erstellt. Sie erscheinen nebeneinander (inline), aber wir können auch ihre Breite und Höhe festlegen (block).
CSS Inline Block - Mit Unterschiedlichem Verhalten
Eine der coolen Sachen an Inline-Block ist, wie es sich je nach Inhalt unterschiedlich verhält. Lassen wir uns das mit einem Beispiel anschauen:
<style>
.container {
font-size: 0; /* Das entfernt den Abstand zwischen Inline-Block-Elementen */
}
.box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
font-size: 16px; /* Schriftgröße für den Inhalt zurücksetzen */
vertical-align: top; /* Kisten nach oben ausrichten */
}
.box1 { background-color: #e74c3c; }
.box2 { background-color: #2ecc71; height: 150px; }
.box3 { background-color: #f39c12; }
</style>
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>In diesem Beispiel haben wir drei Kisten mit verschiedenen Höhen erstellt. Beachte, wie sie alle oben ausgerichtet sind, weil vertical-align: top gesetzt ist. Probier mit dieser Eigenschaft herum, um zu sehen, wie sie die Ausrichtung beeinflusst!
CSS Inline Block - Navigationslinks
Eine häufige Verwendung von Inline-Block ist die Erstellung von Navigationsmenüs. Lassen wir uns eine einfache Navigationsleiste erstellen:
<style>
nav {
background-color: #34495e;
padding: 10px;
}
nav a {
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 20px;
margin-right: 5px;
background-color: #2c3e50;
}
nav a:hover {
background-color: #1abc9c;
}
</style>
<nav>
<a href="#">Startseite</a>
<a href="#">Über uns</a>
<a href="#">Dienstleistungen</a>
<a href="#">Kontakt</a>
</nav>Dies erstellt eine schicke Navigationsleiste mit anklickbaren Links. Die Eigenschaft inline-block ermöglicht es uns, Padding und Ränder auf diese Elemente anzuwenden, was mit nur inline nicht möglich wäre.
CSS Inline Block - Button-Gruppen
Inline-Block ist perfekt für die Erstellung von Button-Gruppen. Hier ist, wie du das machst:
<style>
.btn-group {
font-size: 0; /* Raum zwischen Buttons entfernen */
}
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: #2980b9;
}
.btn:first-child {
border-radius: 5px 0 0 5px;
}
.btn:last-child {
border-radius: 0 5px 5px 0;
}
</style>
<div class="btn-group">
<button class="btn">Links</button>
<button class="btn">Mitte</button>
<button class="btn">Rechts</button>
</div>Dies erstellt eine schöne Button-Gruppe, bei der die Buttons nahtlos verbunden sind.
CSS Inline Block - Bilder und Text
Inline-Block ist großartig für die Ausrichtung von Bildern mit Text. Lassen wir uns das anschauen:
<style>
.image-text {
margin-bottom: 20px;
}
.image-text img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.image-text p {
display: inline-block;
vertical-align: middle;
width: calc(100% - 110px); /* Anpassung basierend auf der Bildbreite */
}
</style>
<div class="image-text">
<img src="https://via.placeholder.com/100" alt="Platzhalter">
<p>Dies ist ein Text, der neben dem Bild erscheint. Die Eigenschaft inline-block ermöglicht es uns, das Bild und den Text vertikal auszurichten.</p>
</div>Dies erstellt eine schöne Anordnung mit einem Bild und danebenem Text.
CSS Inline Block - Fortschrittsbalken
Schließlich erstellen wir einige Fortschrittsbalken mit Inline-Block:
<style>
.progress-container {
width: 300px;
background-color: #f3f3f3;
margin-bottom: 10px;
}
.progress-bar {
display: inline-block;
height: 20px;
background-color: #4caf50;
text-align: center;
line-height: 20px;
color: white;
}
</style>
<div class="progress-container">
<div class="progress-bar" style="width: 70%;">70%</div>
</div>
<div class="progress-container">
<div class="progress-bar" style="width: 40%;">40%</div>
</div>Dies erstellt einfache Fortschrittsbalken mit Prozentsymbolen.
Fazit
Und das war's, Leute! Wir haben die vielseitige Eigenschaft inline-block und ihre verschiedenen Anwendungen erkundet. Von Navigationsmenüs bis hin zu Fortschrittsbalken bietet diese Eigenschaft eine flexible Möglichkeit, Elemente auf deiner Webseite anzuordnen.
Denke daran, der Schlüssel zum Beherrschen von CSS ist die Übung. Also habe keine Angst, diese Beispiele auszuprobieren und deine eigenen einzigartigen Designs zu erstellen. Viel Spaß beim Coden!
Credits: Image by storyset