Bagaimana Membuat Kotak Teks 100% Lebar Tanpa Melimpahi Bekasnya?

Mengatasi Sempadan 100% Lebar Kotak Teks

Dalam pembangunan web, adalah perkara biasa untuk menghadapi dilema untuk memastikan kotak teks diisi sepenuhnya lebar yang dimaksudkan tanpa melebihi had bekasnya. Menetapkan gaya CSS dengan "display:block; width: 100%" mungkin kelihatan seperti penyelesaian yang mudah, tetapi ini boleh membawa kepada isu yang tidak dijangka disebabkan oleh jidar lalai, jidar dan pelapik dalam kotak teks.

Ini boleh mengakibatkan kotak teks kelihatan lebih lebar daripada saiz bekas sebenar, seperti yang dilihat dalam contoh di bawah:

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

Mencapai Kesan yang Diingini

Untuk menyelesaikan isu ini dan memastikan bahawa kotak teks tidak melebihi lebar bekasnya, CSS3 memperkenalkan sifat 'box-sizing: border-box'. Ini mentakrifkan semula takrifan 'lebar' untuk merangkumi kedua-dua padding dalaman dan sempadan luaran.

Walau bagaimanapun, disebabkan pembangunan berterusan CSS3, sifat ini pada masa ini mempunyai nama yang berbeza dalam penyemak imbas yang berbeza:

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

Pendekatan Alternatif untuk Penyemak Imbas Lama

Jika keserasian penyemak imbas membimbangkan, pendekatan alternatif melibatkan penambahan 'padding-right' pada

atau unsur. Ini mengimbangi padding kiri dan kanan tambahan/sempadan dalam piksel yang biasanya diberikan oleh penyemak imbas kepada input (cth., 6px untuk IE

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