Warum überlappen sich zwei Inline-Block-Elemente mit einer Breite von 100 %?

Zwei Inline-Block-Elemente überlappen sich bei Verwendung von 100 % Breite

Beim Versuch, zwei nebeneinander liegende Spalten gleicher Breite zu erstellen , können Sie display: inline-block für die Elemente verwenden. Es tritt jedoch ein unerwartetes Problem auf, wenn diese Elemente kumulativ 100 % der Breite des übergeordneten Elements einnehmen: Die zweite Spalte wird in eine neue Zeile umgebrochen.

Warum passiert das?

Der Grund für dieses Verhalten liegt in der Art und Weise, wie Inline-Block-Elemente mit Leerzeichen umgehen. Standardmäßig berücksichtigen Inline-Block-Elemente die Leerzeichen im HTML-Code. Wenn Sie erhebliche Leerräume zwischen den Elementen haben, wie z. B. Zeilenumbrüche oder Tabulatoren, werden die Elemente entsprechend getrennt.

Lösung: Leerzeichen entfernen

Zur Vermeidung Um die zweite Spalte vom Umbruch zu trennen, entfernen Sie einfach den Leerraum zwischen den Inline-Block-Elementen. Dies kann durch die Verwendung einer einzelnen Zeile HTML-Code wie folgt erreicht werden:

<div>

Wenn der Leerraum entfernt ist, behalten die Inline-Block-Elemente ihre deklarierte Breite bei und bleiben nebeneinander. Seite in der ersten Zeile, die das gewünschte Verhalten erfüllt.

Das obige ist der detaillierte Inhalt vonWarum überlappen sich zwei Inline-Block-Elemente mit einer Breite von 100 %?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!