Mengapa Elemen Blok Sebaris Membungkus pada 100% Lebar, Tetapi Tidak pada 99%?

Blok Sebaris Bertindih: Dilema Paparan Elemen Blok Sebaris

Dalam HTML, apabila seseorang menyasarkan untuk mencapai susun atur dwi-lajur dengan sama dengan lebar 50% untuk setiap lajur, menggunakan sifat 'display: inline-block' kelihatan seperti alternatif yang mudah kepada kaedah apungan tradisional. Walau bagaimanapun, dalam keadaan tertentu, pendekatan ini boleh membawa kepada akibat yang tidak dijangka.

Secara khusus, apabila blok sebaris menggunakan 99% daripada jumlah lebar, ia berkelakuan seperti yang diharapkan, memaparkan sebelah menyebelah secara mendatar. Walau bagaimanapun, sebaik sahaja jumlah lebar mencapai 100%, blok sebaris kedua secara tidak dijangka membungkus ke baris berikut.

Sebab di Sebalik Percanggahan

Tingkah laku pelik ini berpunca daripada fakta bahawa blok sebaris mewarisi sifat ruang putih daripada HTML. Secara lalai, aksara ruang putih wujud di antara elemen dan elemen blok sebaris menyumbang ruang ini dalam pengiraan lebarnya. Akibatnya, apabila jumlah lebar adalah tepat 100%, termasuk ruang putih, blok sebaris kedua melebihi lebar kandungan sebenar, menyebabkan ia membalut ke baris seterusnya.

Penyelesaian: Mengeluarkan Putih -space

Untuk menyelesaikan isu ini, seseorang mesti menghapuskan ruang putih antara elemen blok sebaris. Dengan berbuat demikian, pengiraan atribut lebar menjadi lebih tepat, menghalang blok sebaris kedua daripada melepasi lebar kandungan.

Kod Contoh

Untuk menggambarkan penyelesaian , pertimbangkan kod HTML berikut:

<div>

Dengan mengalih keluar ruang putih antara div, kami mencapai kelakuan yang diingini bagi dua blok sebaris yang memaparkan sebelah-menyebelah dalam lebar 50% untuk setiap satu, walaupun apabila jumlah lebar ialah 100%.

Kesimpulan

Memahami kesan ruang putih pada elemen blok sebaris adalah penting dalam reka letak CSS. Dengan menghapuskan sebarang ruang kosong yang tidak diperlukan antara elemen tersebut, pembangun boleh memastikan bahawa blok sebaris berfungsi seperti yang diharapkan, terutamanya apabila menghadapi cabaran untuk mencipta reka letak dwi-lajur dengan lebar yang sama untuk kedua-dua lajur.

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