Rumah  >  Artikel  >  hujung hadapan web  >  Bolehkah Kotak Teks Lebar 100% Dikandung dalam Bekasnya?

Bolehkah Kotak Teks Lebar 100% Dikandung dalam Bekasnya?

Barbara Streisand
Barbara Streisandasal
2024-10-31 14:25:01289semak imbas

Can 100% Width Text Boxes Be Contained Within Their Containers?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn