Rumah  >  Artikel  >  hujung hadapan web  >  Mengapa Butang Tidak Berkembang untuk Mengisi Bekasnya dengan `display: block` dan `width: auto`?

Mengapa Butang Tidak Berkembang untuk Mengisi Bekasnya dengan `display: block` dan `width: auto`?

Susan Sarandon
Susan Sarandonasal
2024-11-01 10:59:02829semak imbas

Why Doesn't a Button Expand to Fill Its Container with `display: block` and `width: auto`?

Mengapa "display: block" & "width: auto" Tidak Kembangkan Butang untuk Mengisi Bekas?

Dalam HTML, elemen tertentu, seperti butang, input, pilihan dan imej, ditetapkan sebagai "elemen yang diganti." Elemen ini mempunyai dimensi dan penampilan yang wujud yang ditentukan oleh sumber luaran, seperti sistem pengendalian atau pemalam.

Apabila anda menggunakan "paparan: sekat" pada butang, ini menunjukkan bahawa butang itu harus berkelakuan seperti elemen peringkat blok dan menempati lebar penuh bekasnya. Walau bagaimanapun, "lebar: auto" menyatakan bahawa lebar intrinsik butang harus digunakan.

Elemen yang diganti mempunyai dimensi intrinsik, bermakna lebar dan tingginya tetap dan tidak boleh diubah suai oleh CSS. Sebagai contoh, dimensi intrinsik elemen imej ditentukan oleh saiz fail imej. Apabila "lebar: auto" digunakan pada elemen yang diganti, penyemak imbas menghormati lebar intrinsiknya.

Selain itu, elemen yang diganti mungkin mempunyai keperluan pemformatan visual yang dikenakan oleh penyemak imbas atau sistem pengendalian yang mengatasi penggayaan CSS. Butang, sebagai contoh, mempunyai kawalan antara muka pengguna terbina dalam yang tidak boleh diubah suai semata-mata melalui CSS.

Dalam kes butang, walaupun tidak ditakrifkan secara rasmi sebagai elemen yang digantikan oleh W3C, ia mempamerkan gelagat yang serupa. Oleh itu, menggunakan "paparan: blok; lebar: auto;" ke butang tidak akan meregangkannya untuk mengisi bekas kerana lebar intrinsiknya dikekang oleh keperluan pemformatan visual butang.

Atas ialah kandungan terperinci Mengapa Butang Tidak Berkembang untuk Mengisi Bekasnya dengan `display: block` dan `width: auto`?. 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