Bagaimana Membuat Kotak Teks Sesuai dengan Sempurna dengan Bekasnya dalam CSS?

Mengawal Lebar Kotak Teks Dalam Bekas

Dalam reka bentuk web, selalunya diingini untuk mempunyai kotak teks yang merentangi keseluruhan lebar bekasnya . Walau bagaimanapun, isu biasa timbul apabila lebar kotak teks ditetapkan kepada 100% menggunakan CSS. Ini boleh menyebabkan kotak teks berkembang melepasi bekasnya disebabkan jidar lalai, sempadan dan pelapik.

Untuk mengatasi cabaran ini, seseorang boleh menggunakan saiz kotak sifat CSS3: kotak sempadan. Sifat ini mentakrifkan semula konsep 'lebar' untuk memasukkan pelapik luaran dan jidar.

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

Pendekatan moden ini menawarkan kawalan tepat ke atas lebar kotak teks, memastikan ia muat dengan kemas dalam bekasnya.

Sebagai alternatif, untuk penyemak imbas dengan sokongan CSS3 yang terhad, seseorang boleh menggunakan cara melaraskan sifat padding-kanan elemen yang disertakan. Ini melibatkan anggaran ruang tambahan yang diduduki oleh sempadan dan pelapik dalam piksel. Contohnya, dalam versi Internet Explorer di bawah 8, pelarasan ini biasanya melibatkan penambahan 6px pelapik.

Dengan memanfaatkan teknik ini, pereka web boleh mengawal lebar kotak teks dengan berkesan, membolehkan mereka mengisi bekas mereka tanpa tumpah. .

Atas ialah kandungan terperinci Bagaimana Membuat Kotak Teks Sesuai dengan Sempurna dengan Bekasnya dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!