Bolehkah Kotak Teks Lebar 100% Dikandung dalam Bekasnya?

Mengawal Lebar Kotak Teks dalam Bekas

Dalam pembangunan web, kotak teks selalunya diingini memenuhi lebar bekasnya. Walau bagaimanapun, jidar, jidar dan padding yang ditambahkan oleh penyemak imbas boleh menyebabkan kotak teks lebar 100% melangkaui sempadan bekas.

Bolehkah Kotak Teks Lebar 100% Dikandungi?

Ya, dengan menggunakan saiz kotak sifat CSS3: kotak sempadan, anda boleh mentakrifkan semula "lebar" untuk mengambil kira padding dan jidar luaran.

Pelaksanaan CSS

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Penyelesaian ini berfungsi dengan memasukkan ruang tambahan yang diduduki oleh pelapik dan jidar dalam pengiraan lebar kotak teks.

Saran untuk Penyemak Imbas Bukan CSS3

Untuk penyemak imbas yang lebih lama, alternatif ialah menambah jumlah pelapik kanan tertentu pada bekas yang disertakan:

#container {
    padding-right: 6px;
}

Jumlah pelapik biasanya 6px untuk versi IE sebelum 8.

Atas ialah kandungan terperinci Bolehkah Kotak Teks Lebar 100% Dikandung dalam Bekasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!