Mengapa \'display: block\' dan \'width: auto\' Tidak Meregangkan Butang untuk Mengisi Bekas dalam Chrome?

Mengapa "paparan: blok" & "lebar: auto" Tidak Meregangkan Butang untuk Mengisi Bekas

Apabila menggunakan "paparan: blok" dan "lebar: auto" pada butang, anda mungkin menjangkakan butang itu meregang dan mengisi bekas seperti elemen blok lain. Walau bagaimanapun, tingkah laku ini tidak berlaku dalam versi terbaharu Chrome.

Memahami Gelagat

Sebab bagi tingkah laku ini terletak pada pengelasan butang sebagai "elemen yang diganti. " Elemen yang diganti, yang termasuk elemen input, pilih, butang, img, objek dan textarea, mempunyai ciri paparan lalai khusus.

Menurut spesifikasi CSS, elemen yang diganti boleh mempunyai dimensi intrinsik yang ditentukan oleh sumber luaran, seperti imej atau kawalan pelayar. Contohnya, jika elemen imej mempunyai set lebar kepada "auto", ia akan menggunakan lebar sebenar fail imej yang dipautkan.

Selain itu, elemen yang digantikan boleh mempunyai keperluan pemformatan visual yang dikenakan oleh elemen itu sendiri, seperti kerana rupa antara muka pengguna mengawal elemen borang, yang berada di luar kawalan CSS.

Bagaimana Ini Mempengaruhi Butang

Walaupun butang tidak dianggap sebagai elemen yang digantikan tulen sebagai ditakrifkan oleh W3C, mereka berkelakuan serupa dalam konteks ini. Secara lalai, mereka mempunyai dimensi intrinsik berdasarkan kandungannya dan "display: block" tidak mengatasi gelagat ini.

Penyelesaian untuk Regangan Butang

Jika anda mahu butang regangan untuk mengisi bekas, anda boleh menggunakan pendekatan alternatif:

<code class="css">button {
  display: flex;
  width: 100%;
}</code>

Flexbox menyediakan lebih kawalan ke atas saiz elemen dan membolehkan elemen diregangkan untuk mengisi ruang yang tersedia.

Atas ialah kandungan terperinci Mengapa \'display: block\' dan \'width: auto\' Tidak Meregangkan Butang untuk Mengisi Bekas dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!