Mengapa `display: block` tidak berfungsi seperti yang dijangkakan pada Elemen Input?

Memahami Keunikan Elemen Input dengan Paparan: Sekat

Dalam CSS, menetapkan sifat paparan elemen untuk menyekat mengubahnya menjadi elemen peringkat blok, yang biasanya menjangkau lebar penuh bekasnya. Walau bagaimanapun, menggunakan sifat ini pada elemen input boleh membawa kepada tingkah laku yang tidak dijangka.

Isunya

Apabila paparan: blok digunakan pada input teks (), ia tidak berkelakuan seperti elemen peringkat blok biasa. Sebaliknya, dimensi input kekal tidak berubah, dengan hanya label teks muncul pada satu baris.

Mengapa Ia Tidak Berfungsi Seperti Div?

Percanggahan ini ialah disebabkan oleh cara unik elemen input diberikan. Tidak seperti div, yang bertujuan terutamanya untuk susun atur kandungan, medan input direka untuk interaksi pengguna dan kemasukan data. Oleh itu, mereka mempunyai set penggayaan lalai mereka sendiri, yang mengatasi paparan: sifat blok.

Mencapai Kesan yang Diingini

Untuk mendapatkan medan input untuk mengisi lebar bekasnya seperti div, anda perlu mengatasi penggayaan lalai. Berikut ialah beberapa penyelesaian yang mungkin:

• Menambah lebar maks: 100%: Penyelesaian ini memaksa medan input untuk mematuhi model kotak CSS biasa, di mana lebarnya termasuk pelapik dan sempadan.
• Menggunakan Hartanah bersaiz kotak: CSS3 memperkenalkan sifat bersaiz kotak, yang membolehkan anda menentukan cara lebar elemen dikira. Menetapkan saiz kotak: kotak sempadan merangkumi kedua-dua pelapik dan jidar dalam lebar elemen.

Sokongan Penyemak Imbas Rentas

Adalah penting untuk ambil perhatian bahawa kotak -sifat saiz tidak disokong oleh semua penyemak imbas, jadi awalan khusus penyemak imbas tambahan (cth., -moz-box-sizing untuk Firefox) mungkin diperlukan untuk keserasian merentas penyemak imbas.

Atas ialah kandungan terperinci Mengapa `display: block` tidak berfungsi seperti yang dijangkakan pada Elemen Input?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!