Bagaimana untuk Membuat Span Kotak Teks 100% daripada Bekasnya Tanpa Limpahan?

Mengawal Pengembangan Kotak Teks Lebar 100%

Adalah perkara biasa untuk menginginkan kotak teks yang merentangi keseluruhan lebar bekasnya. Untuk mencapai matlamat ini, seseorang mungkin menggunakan gaya seperti:

<code class="css">input.wide {
  display: block;
  width: 100%;
}</code>

Walau bagaimanapun, pendekatan ini menghadapi cabaran: lebar kotak teks ditentukan oleh kandungannya. Jidar lalai, jidar dan pelapik pada kotak teks menyebabkan ia melangkaui sempadan bekas, mewujudkan jurang yang tidak sedap dipandang.

Untuk menangani isu ini, kami memerlukan satu cara untuk kotak teks mengisi lebarnya bekas tanpa melebihinya. Satu penyelesaian ialah menggunakan saiz kotak sifat CSS3: kotak sempadan. Sifat ini mentakrifkan semula maksud lebar untuk menyertakan pelapik luaran dan jidar.

Malangnya, sokongan untuk saiz kotak masih belum universal. Oleh itu, kita boleh memasukkan nilai sandaran khusus penyemak imbas:

<code class="css">input.wide {
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}</code>

Sebagai alternatif kepada menggunakan saiz kotak, seseorang boleh menggunakan padding-right secara manual pada elemen yang melampirkan, memastikan ia sama dengan padding yang dijangkakan dan sempadan.

Kedua-dua pendekatan membenarkan seseorang mengawal lebar kotak teks sambil menghalangnya daripada tumpah melebihi hadnya bekas.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Span Kotak Teks 100% daripada Bekasnya Tanpa Limpahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!