Bagaimana untuk Menjajarkan Dua Elemen Secara Mendatar Tanpa Mengubah HTML?

Menjajarkan Dua Elemen pada Garisan Yang Sama Tanpa Mengubah Penanda

Apabila menggayakan elemen, menjajarkannya secara mendatar boleh menjadi satu cabaran, terutamanya jika lebarnya turun naik. Pertimbangkan senario dengan dua elemen, "elemen1" dan "elemen2," masing-masing diletakkan pada baris yang sama dengan terapung kiri dan kanan. Cabaran timbul apabila lebar "elemen2" berbeza-beza, menyebabkan ia tidak sejajar dengan "elemen1."

Untuk menangani perkara ini, paparan sifat CSS: blok sebaris menyediakan penyelesaian. Dengan menggunakan sifat ini pada kedua-dua elemen, ia akan bertindak sebagai elemen sebaris tetapi diletakkan seperti elemen blok.

Kod CSS:

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

#element2 {
  display: inline-block;
}

Markup:

<div>

Dengan menetapkan paparan:inline-block pada kedua-dua elemen, ia akan menjajarkan secara mendatar dengan margin yang ditentukan sebanyak 10px di antara mereka. Ini memastikan bahawa "elemen2" sejajar dengan "elemen1" walaupun lebarnya berubah, tanpa mengubah suai struktur HTML.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Dua Elemen Secara Mendatar Tanpa Mengubah HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!