Warum werden meine 50 % breiten Inline-Block-Elemente in die nächste Zeile umgebrochen?

Umbruch von Inline-Block-Elementen zur zweiten Zeile: Breite und Leerraum verstehen

Beim Versuch, zwei Inline-Block-Elemente mit einer Breite von 50 % zu erstellen, wird dies angezeigt Es kann frustrierend sein, auf ein Problem zu stoßen, bei dem das zweite Element in die nächste Zeile umgebrochen wird. Dieses Verhalten ist jedoch nicht auf die Eigenschaft „inline-block“ zurückzuführen, sondern vielmehr auf die Leerraumverwaltung.

Die Eigenschaft „display:inline-block“ ermöglicht es Elementen, sich wie Inline-Elemente zu verhalten (auf demselben angezeigt). Linie) und hat gleichzeitig eine definierte Breite und Höhe. Im Gegensatz zu Inline-Elementen berücksichtigen Inline-Block-Elemente jedoch Leerzeichen bei ihrer Breitenberechnung.

Im Fall von zwei Inline-Block-Elementen mit einer Gesamtbreite von 99 %, z. B. 50 % und 49 % , die Breitenmessung umfasst den Leerraum zwischen ihnen. Dadurch passen die Elemente in die angegebene Breite und erscheinen nebeneinander.

Wenn andererseits die Gesamtbreite der Elemente 100 % beträgt, ist auch der Leerraum im enthalten Berechnung. Da kein Platz mehr für das zweite Element vorhanden ist, muss es in die nächste Zeile umgebrochen werden.

Um dieses Problem zu beheben und zu verhindern, dass das zweite Element unterbrochen wird, wird der Leerraum zwischen den Inline-Block-Elementen entfernt kann entfernt werden. Durch Eliminieren des Leerraums wird die Breitenberechnung entsprechend angepasst und beide Elemente passen bequem in die gleiche Zeile.

Diese Anpassung kann mithilfe von CSS vorgenommen werden, indem die Leerraumeigenschaft des übergeordneten Elements auf gesetzt wird nowrap oder none, wie im Beispiel unten zu sehen:

#parent-container {
  white-space: nowrap;
}

Das obige ist der detaillierte Inhalt vonWarum werden meine 50 % breiten Inline-Block-Elemente in die nächste Zeile umgebrochen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!