Mengapakah `display: block` Tidak Menjadikan Elemen Input Saya Memenuhi Lebar Bekasnya?

Elemen Input Tidak Berkembang kepada Lebar Bekas Sekat dengan 'Display:block'

Walaupun memberikan 'display:block' kepada elemen input, ia mungkin tidak berkelakuan seperti div dan mengisi lebar bekas. Penyimpangan ini berpunca daripada gelagat yang wujud unsur input dalam CSS.

Dalam CSS, 'display:block' lazimnya membenarkan elemen berkembang dan mengambil lebar penuh yang tersedia. Walau bagaimanapun, elemen input direka bentuk untuk mempunyai 'display:inline' sebagai mod paparan lalainya. Ini bermakna mereka hanya akan mengambil lebar kandungan mereka, yang termasuk sebarang pelapik dan sempadan.

Untuk menyelesaikan isu ini dan memaksa elemen input mengisi lebar, seseorang boleh menggunakan 'width:100%'. Walau bagaimanapun, pendekatan ini boleh menjadi masalah jika input mempunyai padding dan sempadan bukan sifar, kerana ia akan menghasilkan lebar akhir yang melebihi 100%.

Penyelesaian Cross-Browser Menggunakan CSS3 'kotak saiz '

Penyelesaian komprehensif melibatkan penggunaan sifat 'box-sizing:border-box' yang agak tidak diketahui daripada CSS3. Sifat ini memastikan bahawa lebar elemen input (atau mana-mana elemen lain) termasuk pelapik dan jidarnya.

Berikut ialah versi diubah suai bagi kod CSS yang disediakan:

form { display: block; margin: 0; padding: 0; width: 50%; border: 1px solid green; overflow: visible }
div, input { display: block; border: 1px solid red; padding: 5px; width: 100%; font: normal 12px Arial; }

.bb {
    box-sizing: border-box; /* CSS 3 rec */
    -moz-box-sizing: border-box; /* Firefox 2 */
    -ms-box-sizing: border-box; /* Internet Explorer 8 */
    -webkit-box-sizing: border-box; /* Safari 3 */
    -khtml-box-sizing: border-box; /* Konqueror */
}

Dengan menambahkan Kelas '.bb' kepada elemen input, anda boleh mendayakan 'box-sizing:border-box' untuk keserasian merentas pelayar. Ini memastikan elemen input akan sentiasa menggunakan lebar penuh yang tersedia, tanpa mengira pelapik dan sempadannya.

Nota Tambahan:

1. Internet Explorer 6 dan 7 tidak menyokong CSS3 'bersaiz kotak', tetapi ia boleh didayakan menggunakan skrip tingkah laku.
2. The Sifat 'box-sizing:border-box' disokong dalam kebanyakan penyemak imbas moden, termasuk Google Chrome, Firefox, Safari dan Opera.

Atas ialah kandungan terperinci Mengapakah `display: block` Tidak Menjadikan Elemen Input Saya Memenuhi Lebar Bekasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!