Mengapa Dua Elemen Blok Sebaris Lebar 100% Bertindih?

Dua Elemen Blok Sebaris Bertindih Apabila Menggunakan Lebar 100%

Dalam percubaan untuk mencipta dua lajur sebelah menyebelah yang sama lebar , anda mungkin menggunakan display: inline-block pada elemen. Walau bagaimanapun, isu yang tidak dijangka timbul apabila elemen ini secara kumulatif menduduki 100% lebar induk: lajur kedua dibalut ke baris baharu.

Mengapa Ini Berlaku?

Sebab bagi tingkah laku ini terletak pada cara elemen blok sebaris mengendalikan ruang putih. Secara lalai, elemen blok sebaris menghormati aksara ruang putih dalam kod HTML. Apabila anda mempunyai ruang putih yang ketara di antara unsur, seperti garis baharu atau tab, elemen akan diasingkan dengan sewajarnya.

Penyelesaian: Alih Keluar Ruang Putih

Untuk mengelakkan lajur kedua daripada membungkus, cuma keluarkan ruang putih antara elemen blok sebaris. Ini boleh dicapai dengan menggunakan satu baris kod HTML, seperti berikut:

<div>

Dengan ruang putih dialih keluar, elemen blok sebaris akan mematuhi lebar yang diisytiharkan dan kekal bersebelahan- sebelah pada baris pertama, memenuhi tingkah laku yang diingini.

Atas ialah kandungan terperinci Mengapa Dua Elemen Blok Sebaris Lebar 100% Bertindih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!