Bagaimana untuk Menghalang Kotak Teks Lebar daripada Melangkaui Bekasnya?

Mencegah Kotak Teks Lebar daripada Bekas Terlalu Panjang

Apabila cuba mencipta kotak teks yang merangkumi keseluruhan lebar bekas, isu biasa timbul: lebar sebenar kotak teks mungkin melangkaui sempadan bekas. Ini kerana penyemak imbas memperuntukkan jidar, jidar dan padding secara lalai, yang meningkatkan lebar keseluruhan kotak teks dengan berkesan.

Pertimbangkan contoh berikut:

<code class="html"><div id="outer">
  <div id="inner">
    <input type="text" class="wide" />
    <input type="text" class="normal" />
    <div style="clear:both;"></div>
  </div>
</div></code>

<code class="css">#outer {
  border: 1px solid #000;
  width: 320px;
  margin: 0px;
  padding: 0px;
}
#inner {
  margin: 20px;
  padding: 20px;
  background: #999;
  border: 1px solid #000;
}
input.wide {
  display: block;
  margin: 0px;
  width: 100%;
}
input.normal {
  display: block;
  float: right;
}</code>

Dalam senario ini, kotak teks kelas "lebar" melangkaui bekas, manakala kotak teks kelas "biasa" sejajar tepat dengan tepi bekas. Untuk mengelakkan pelanjutan berlebihan, sifat "pengukuran kotak" yang diperkenalkan dalam CSS3 menyediakan penyelesaian.

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

Dengan menetapkan "pengukuran kotak" kepada "kotak sempadan", lebar kotak teks ditakrifkan kepada termasuk pelapik luaran dan sempadan. Ini memastikan bahawa kotak teks menempati lebar penuh bekasnya tanpa melangkaui sempadannya.

Malangnya, kerana "pengukuran kotak" ialah sifat CSS3, keserasian penyemak imbas mungkin berbeza-beza. Memandangkan proses spesifikasi sedang berjalan, penyemak imbas telah menggunakan nama sementara yang berbeza untuknya: "moz-box-sizing" untuk Mozilla dan "webkit-box-sizing" untuk penyemak imbas berasaskan WebKit.

Pendekatan alternatif untuk yang lebih lama pelayar melibatkan penggunaan "padding-right" pada elemen induk (cth., "div" atau "td"). Ini boleh membantu menampung ruang tambahan yang diduduki oleh pelapik lalai dan sempadan dalam elemen input. Walau bagaimanapun, jumlah "padding-right" yang diperlukan mungkin berbeza-beza bergantung pada penyemak imbas yang digunakan.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Kotak Teks Lebar daripada Melangkaui Bekasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!