Wie richtet man zwei Elemente horizontal aus, ohne den HTML-Code zu ändern?

Ausrichten von zwei Elementen auf derselben Linie, ohne das Markup zu ändern

Beim Stylen von Elementen kann das horizontale Ausrichten von Elementen eine Herausforderung sein, insbesondere wenn sie breit sind schwankt. Stellen Sie sich ein Szenario mit zwei Elementen vor, „element1“ und „element2“, die in derselben Zeile mit linken bzw. rechten Gleitkommazahlen positioniert sind. Die Herausforderung entsteht, wenn die Breite von „element2“ variiert, was dazu führt, dass es nicht mit „element1“ übereinstimmt.

Um dieses Problem zu beheben, bietet die CSS-Eigenschaft display:inline-block eine Lösung. Durch Anwenden dieser Eigenschaft auf beide Elemente verhalten sie sich wie Inline-Elemente, werden jedoch wie Blockelemente positioniert.

CSS-Code:

#element1 {
  display: inline-block;
  margin-right: 10px; /* Adjust the margin for desired spacing */
}

#element2 {
  display: inline-block;
}

Markup:

<div>

Durch die Einstellung von display:inline-block für beide Elemente werden diese horizontal mit einem angegebenen Abstand von ausgerichtet 10 Pixel dazwischen. Dadurch wird sichergestellt, dass „element2“ auch dann an „element1“ ausgerichtet ist, wenn sich seine Breite ändert, ohne die HTML-Struktur zu ändern.

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