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

Input dengan Paparan: Sekat tidak Berkelakuan Seperti Sekat

Dalam CSS, tetapan paparan: sekat pada elemen menetapkannya sebagai blok- elemen aras, yang sepatutnya memenuhi ruang mendatar yang tersedia. Walau bagaimanapun, apabila ini digunakan pada elemen input, ia tidak berkelakuan seperti elemen blok biasa, seperti div. Ini disebabkan oleh kelainan dalam cara elemen input dipaparkan.

Lebar: Auto Tidak Bertindak Seperti Yang Dijangka

Lebar tetapan: auto pada elemen input tidak memaksa ia untuk mengisi lebar bekas seperti elemen div. Ini kerana elemen input mempunyai dimensi intrinsik dan pelapik secara lalai, yang mengatasi sifat lebar.

Mencapai Pengembangan Lebar Input

Untuk menjadikan input mengisi lebar yang tersedia, pilihan berikut boleh digunakan:

• Tetap Lebar: Ini bukan penyelesaian yang ideal kerana ia tidak mengambil kira kandungan yang berbeza-beza dalam input.
• Penyelesaian Pembungkus: Menggunakan elemen pembungkus di sekeliling input boleh menyediakan penyelesaian, tetapi ia menambah penanda HTML yang tidak perlu.
• Size-Box: Border-Box: CSS3 memperkenalkan sifat bersaiz kotak, yang membolehkan elemen mempunyai padding dan jidarnya disertakan dalam pengiraan lebarnya apabila ditetapkan kepada kotak sempadan.

.input-width-full {
  box-sizing: border-box;
  width: 100%;
}

Sokongan Penyemak Imbas Lama

Untuk penyemak imbas yang tidak menyokong saiz kotak CSS3, fail tingkah laku (.htc) boleh digunakan untuk mensimulasikan model kotak sempadan. Ini memerlukan penggunaan ulasan bersyarat untuk menyasarkan Internet Explorer 6 dan 7.

Dengan menggunakan teknik ini, adalah mungkin untuk mencipta input yang berkembang secara dinamik untuk mengisi lebar bekasnya, walaupun dengan pelapik dan sempadan sewenang-wenangnya, memastikan reka letak CSS yang lebih fleksibel dan konsisten.

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