Bagaimanakah Saya Mencegah Elemen Sekat Sebaris Daripada Melimpahi Bekasnya?

Membetulkan Kotak Blok Sebaris Yang Melimpahi Bekasnya

Apabila menggunakan elemen blok sebaris, ruang yang tidak dijangka boleh menyebabkan di antaranya, menyebabkan masalah dalam yang mengandungi bekas mereka. Isu ini menjadi ketara apabila menentukan bekas induk dengan lebar yang ditetapkan dan cuba memuatkan berbilang kotak blok sebaris di dalamnya.

Satu penyelesaian kepada isu ini ialah menghapuskan semua ruang kosong antara elemen blok sebaris dalam kod sumber. Dengan mengalih keluar ruang dan pemisah baris, elemen akan muat dengan kemas dalam bekas induk, memastikan ia kekal dalam hadnya.

Sebagai contoh, pertimbangkan kod CSS dan HTML berikut:

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
}

.box {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  border: 2px solid blue;
  height: 100%;
}

<div class="ok">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Dalam contoh ini, mengalih keluar sebarang ruang putih antara div blok sebaris menghasilkan kesesuaian sempurna dalam bekas induk, menghapuskan ruang yang tidak diingini isu. Menggunakan penyelesaian ini memastikan elemen blok sebaris berkelakuan seperti yang diharapkan, membolehkan kawalan reka letak yang tepat dalam elemen kontena.

Atas ialah kandungan terperinci Bagaimanakah Saya Mencegah Elemen Sekat Sebaris Daripada Melimpahi Bekasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!