Heim > Web-Frontend > CSS-Tutorial > Wie richtet man zwei Elemente horizontal aus, ohne den HTML-Code zu ändern?

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

Linda Hamilton
Freigeben: 2024-11-20 18:46:11
Original
584 Leute haben es durchsucht

How to Horizontally Align Two Elements Without Changing the HTML?

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;
}
Nach dem Login kopieren

Markup:

<div>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage