Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menjajarkan Dua Elemen Secara Mendatar Tanpa Mengubah HTML?

Bagaimanakah Saya Boleh Menjajarkan Dua Elemen Secara Mendatar Tanpa Mengubah HTML?

Susan Sarandon
Lepaskan: 2024-11-30 00:44:10
asal
752 orang telah melayarinya

How Can I Horizontally Align Two Elements Without Changing the HTML?

Menjajarkan Elemen pada Baris yang Sama tanpa Pengubahsuaian HTML

Letakkan elemen secara mendatar sebelah-menyebelah boleh menimbulkan cabaran apabila lebarnya dinamik. Dalam senario ini, di mana dua elemen diapungkan ke kiri dan kanan pada baris yang sama, isu timbul dengan lebar pembolehubah elemen2 yang berpotensi menjajarkannya dengan elemen1.

Untuk menyelesaikannya tanpa mengubah suai HTML, pertimbangkan untuk menggunakan display:inline- blok. Teknik ini mentakrifkan elemen sebagai elemen sebaris sambil mengekalkan tingkah laku seperti blok mereka. Dengan mentakrifkan elemen1 dengan display:inline-block dan nilai margin-kanan sebanyak 10px, anda mencipta jarak yang konsisten antara kedua-dua elemen.

Pelaksanaan:

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

#element2 {
  display: inline-block;
}
Salin selepas log masuk

Contoh:

<div>
Salin selepas log masuk

Kaedah ini membolehkan anda menjajarkan elemen2 di sebelah elemen1 dengan padding yang konsisten di antara mereka, tanpa mengira lebar dinamik elemen2.

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan