Mengapa Elemen Input dan Butang Tidak Sentiasa Berkelakuan Seperti Yang Dijangkakan dalam Bekas Flex?

Isu Bekas Fleksibel dengan Elemen Input dan Butang

Elemen input dan butang dalam bekas fleksibel mungkin tidak bertindak balas seperti yang diharapkan untuk sifat melenturkan. Ini disebabkan oleh gelagat wujud elemen input, yang mempunyai tetapan lebar lalai.

Lebar Lalai Elemen Input

Tidak seperti elemen div, yang bermula tanpa lebar intrinsik , elemen input diberikan lebar lalai oleh pelayar. Lebar ini boleh menghalang sifat lentur daripada berkuat kuasa dengan betul.

Ilustrasi Lebar Lalai

Imej berikut menunjukkan lebar lalai elemen input:

[Imej elemen input dengan sempadan biru, menunjukkan lebar lalai]

Seperti yang dilihat dalam imej, penyemak imbas secara automatik memberikan input lebar, menghalangnya daripada mengecut atau berkembang seperti yang dijangkakan dalam bekas fleksibel.

Penyelesaian: Mengatasi Lebar Lalai

Untuk menyelesaikan isu ini, gantikan lebar lalai elemen input menggunakan CSS:

input {
  width: 100%;
  flex: 1;
}

Ini akan membenarkan elemen input untuk mengecut atau membesar dalam bekas flex seperti yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa Elemen Input dan Butang Tidak Sentiasa Berkelakuan Seperti Yang Dijangkakan dalam Bekas Flex?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!