Wie kann ich Elemente horizontal ausrichten, ohne den HTML-Code zu ändern?

Elemente ohne HTML-Änderung auf derselben Linie ausrichten

Der Versuch, zwei Elemente mithilfe von CSS-Floats nebeneinander auszurichten, ist eine Herausforderung um eine präzise Ausrichtung bei unterschiedlichen Breiten der Elemente zu gewährleisten. Wenn eine Änderung der HTML-Struktur keine Option ist, gibt es eine CSS-Technik, um Elemente in derselben Zeile auszurichten.

Die Lösung liegt in der Verwendung der display:inline-block-Eigenschaft. So geht's:

#element1 {display:inline-block;margin-right:10px;} 
#element2 {display:inline-block;}

Dieses CSS legt fest, dass beide Elemente als Inline-Blöcke angezeigt werden, sodass sie wie Text nebeneinander stehen können. Die margin-right-Eigenschaft für #element1 erstellt den gewünschten Abstand zwischen den Elementen.

Wenn beispielsweise #element1 „Element 1-Markup“ und #element2 „Element 2-Markup“ enthält, ergibt sich das obige CSS Folgendes:

<div>

Diese Technik stellt sicher, dass beide Elemente auch bei unterschiedlichen Breiten horizontal ausgerichtet sind, was ein einheitliches Ausrichtungserlebnis bietet.

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente horizontal ausrichten, ohne den HTML-Code zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!