Mengapa Elemen Input Tahap Sekat Sentiasa Mengisi Bekasnya Seperti Div?

Elemen Input Dipaparkan sebagai Blok: Mengapa Mereka Berbeza daripada Div

Adalah perkara biasa untuk melihat elemen input dengan paparan: blok dan lebar: auto untuk berkelakuan serupa dengan div, menduduki lebar penuh bekasnya. Walau bagaimanapun, seperti yang diperhatikan dalam coretan kod yang diberikan, ini tidak berlaku.

Memahami Percanggahan

Tidak seperti div, elemen input mengikut model kotak yang berbeza, dikenali sebagai model kotak sempadan. Model ini mempertimbangkan pelapik dan sempadan dalam pengiraan lebar keseluruhan, tidak seperti model kotak kandungan yang digunakan untuk div.

Mengatasi Isu

Untuk memaksa elemen input merentang lebar kontena penuh, sambil menghormati pelapik dan sempadannya, seseorang boleh menggunakan lebar maksimum: 100% harta. Teknik ini pada asasnya mengehadkan lebar elemen input kepada bekas induknya, walaupun jika lebar yang dikira melebihi nilai ini disebabkan oleh jidar dan pelapiknya.

Keserasian Merentas Penyemak Imbas

Untuk mencapai gelagat yang konsisten merentas pelayar, ciri saiz kotak yang diperkenalkan baru-baru ini: kotak sempadan boleh digunakan. Sifat ini secara eksplisit mengarahkan penyemak imbas untuk menggunakan model kotak sempadan untuk elemen sasaran, tanpa mengira model kotak lalainya.

Pelaksanaan

Kod berikut menunjukkan penyelesaian ini :

<div class="wrapper">
  <input type="text" class="input" placeholder="Input Text" />
</div>

<style>
  .wrapper {
    width: 500px;
    border: 1px solid black;
    padding: 20px;
  }

  .input {
    width: 100%;
    box-sizing: border-box;
  }
</style>

Pendekatan ini memastikan elemen input menempati lebar penuh bekas dalam semua major pelayar.

Atas ialah kandungan terperinci Mengapa Elemen Input Tahap Sekat Sentiasa Mengisi Bekasnya Seperti Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!