Mengapa Elemen Blok Sebaris Saya Tidak Dipaparkan Bersebelahan?

Elemen Blok Sebaris Tidak Sesuai Bersebelahan dalam Satu Baris

Dalam kod HTML yang diberikan, kami menyasarkan untuk memaparkan dua sebaris- elemen blok, #kiri dan #kanan, sebelah menyebelah dalam satu baris, setiap elemen menduduki 50% lebar. Walau bagaimanapun, daripada menjajarkan elemen secara mendatar, jurang ruang putih muncul di antara mereka.

Memahami Elemen Sekat Sebaris

Sebagai elemen blok sebaris, #kiri dan #kanan berkelakuan seperti elemen sebaris dan blok. Ia wujud pada baris yang sama dengan elemen sebaris, tetapi ia boleh menetapkan lebar dan ketinggiannya seperti elemen blok.

Ruang Bisikan Sebaris-Blok

Apabila menggunakan blok sebaris , jurang ruang putih sememangnya wujud antara elemen bersebelahan disebabkan oleh "ruang bisikan", ruang lebar ~4px yang tidak kelihatan ditambah untuk pelapik dan pemisahan garisan. Oleh itu, lebar gabungan kedua-dua div, termasuk ruang berbisik, melebihi 100%, memecahkan reka letak mendatar.

Penyelesaian Kemungkinan

1. Melaraskan Lebar Elemen:

Satu penyelesaian ialah mengurangkan lebar satu div kepada 49%, mengimbangi ruang bisikan. Walau bagaimanapun, ini mungkin meninggalkan jurang yang boleh dilihat antara elemen.

2. Elemen Terapung:

Pilihan lain ialah mengapungkan kedua-dua div, yang mengalih keluar isu ruang bisikan dengan menjajarkannya pada baris baharu. Pendekatan ini berfungsi dengan berkesan tetapi boleh menjejaskan aliran halaman.

Pengesyoran Kemas Kini:

Untuk keserasian penyemak imbas moden, disyorkan untuk menggunakan flexbox atau reka letak grid CSS dan bukannya inline-block untuk susun atur seperti ini. Teknik ini memberikan lebih kawalan ke atas jarak dan membolehkan reka bentuk responsif dan adaptif.

Atas ialah kandungan terperinci Mengapa Elemen Blok Sebaris Saya Tidak Dipaparkan Bersebelahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!