Mengapa Dua Elemen Blok Sebaris Lebar 50% Membungkus ke Baris Seterusnya?

Dua Elemen Blok Sebaris dengan Lebar 50% Memecah kepada Baris Kedua

Apabila cuba mencipta dua lajur dengan lebar 50% yang sama menggunakan paparan: blok sebaris, ia adalah diperhatikan bahawa jika jumlah lebar elemen melebihi 99%, lajur kedua dibalut ke baris seterusnya. Tingkah laku ini mungkin kelihatan berlawanan dengan intuisi.

Memahami Isu

Sebab bagi tingkah laku ini terletak pada cara display:inline-block berinteraksi dengan ruang putih dalam HTML. Ruang putih, seperti pemisah baris, tab dan ruang, diruntuhkan oleh display:inline-block. Ini bermakna apabila terdapat ruang putih antara elemen blok sebaris, ia dianggap sebagai ruang tunggal dan elemen diletakkan secara berkesan bersebelahan antara satu sama lain.

Apabila jumlah lebar elemen blok sebaris melebihi 100 %, tiada ruang yang tinggal untuk menampung ruang putih. Akibatnya, lajur kedua terpaksa dibalut ke baris seterusnya.

Penyelesaian: Mengalih keluar Ruang Putih

Untuk menyelesaikan isu ini, adalah perlu untuk mengalih keluar ruang putih antara elemen blok sebaris . Ini boleh dicapai dengan menggunakan kod HTML berikut:

<div>

Dengan menggabungkan div tanpa sebarang ruang kosong, elemen paparan:sebaris-blok diletakkan bersebelahan, tanpa sebarang ruang di antaranya. Ini memastikan ia membalut dengan betul dalam lebar bekas.

Dengan pelarasan ini, dua elemen blok sebaris akan mengekalkan lebar 50% dan tidak akan membalut ke baris kedua, walaupun jumlah lebarnya melebihi 100% .

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