Mengapa Elemen Blok Sebaris Saya Tidak Menjajarkan Bersebelahan?

Elemen Blok Sebaris Gagal Menjajarkan Bersebelahan

Pertimbangkan senario di mana dua elemen dengan paparan: blok sebaris diberikan 50% lebar. Seseorang mungkin menjangkakan mereka muat sebelah menyebelah, tetapi sebaliknya, mereka melebihi ruang yang tersedia. Untuk menyelesaikan masalah ini:

Asal Isu

Elemen blok sebaris mewarisi jidar di antara mereka, walaupun kelihatan menghapuskannya secara visual. Ruang putih tambahan ini, biasanya sekitar 4px, menyebabkan jumlah lebar kedua-dua elemen melebihi 100%.

Penyelesaian Alternatif

• Kurangkan Lebar Elemen: Mengurangkan lebar satu elemen hingga 49% menyelesaikan isu limpahan tetapi memperkenalkan yang tidak diingini jurang.
• Elemen Terapung: Mengapungkan kedua-dua elemen menjajarkannya dengan betul, mengekalkan 50% lebar untuk setiap satu.

Penyelesaian Ideal untuk Penyemak Imbas Moden (2021 dan seterusnya )

Flexbox atau Susun Letak Grid CSS ialah alternatif yang disyorkan kepada sekatan sebaris. Ia memberikan kawalan yang lebih baik ke atas jarak dan reka letak tanpa isu ruang putih yang wujud.

Sekat-Sebaris dan Ruang Putih

Untuk menggambarkan isu ruang putih, pertimbangkan kod berikut:

body {
  margin: 0; /* remove default body margin */
}

div {
  display: inline-block;
  width: 50%;
}

.left {
  background-color: aqua;
}

.right {
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Walaupun elemen kelihatan bersebelahan, terdapat jurang yang sempit di antara mereka dalam amalan.

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