Warum werden meine Inline-Blockelemente nicht nebeneinander ausgerichtet?

Inline-Block-Elemente können nicht nebeneinander ausgerichtet werden

Stellen Sie sich ein Szenario vor, in dem zwei Elementen mit display: inline-block eine Breite von 50 % zugewiesen wird. Man könnte erwarten, dass sie nebeneinander passen, aber stattdessen überschreiten sie den verfügbaren Platz. Um dieses Problem zu beheben:

Ursprung des Problems

Inline-Block-Elemente erben einen Abstand zwischen ihnen, auch wenn dieser scheinbar optisch beseitigt wird. Dieser zusätzliche Leerraum, normalerweise etwa 4 Pixel, führt dazu, dass die Gesamtbreite der beiden Elemente 100 % überschreitet.

Alternative Lösungen

• Elementbreite reduzieren: Verringern der Die Breite eines Elements auf 49 % löst das Überlaufproblem, führt jedoch zu einem unerwünschten Problem Lücke.
• Floating-Elemente:Floating beider Elemente richtet sie korrekt aus und behält jeweils die Breite von 50 % bei.

Ideale Lösung für moderne Browser (2021 und höher). )

Flexbox oder CSS Grid Layout sind empfohlene Alternativen zu Inline-Block. Sie bieten eine bessere Kontrolle über Abstände und Layout ohne das inhärente Leerzeichenproblem.

Inline-Block und Leerzeichen

Um das Leerzeichenproblem zu veranschaulichen, betrachten Sie den folgenden Code:

body {
  margin: 0; /* remove default body margin */
}

div {
  display: inline-block;
  width: 50%;
}

.left {
  background-color: aqua;
}

.right {
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Während die Elemente benachbart zu sein scheinen, gibt es in der Praxis einen schmalen Abstand zwischen ihnen.

Das obige ist der detaillierte Inhalt vonWarum werden meine Inline-Blockelemente nicht nebeneinander ausgerichtet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!