Bagaimana untuk Membuat Medan Input Menjangkau Keseluruhan Lebar Bekasnya?

Cara Memanjangkan Lebar Elemen Input ke Sempadan Bekas

Apabila mereka bentuk borang web, lebar elemen input berbanding bekasnya kadangkala boleh hadir cabaran. Artikel ini membincangkan penyelesaian mudah yang membolehkan anda memanjangkan lebar elemen input untuk mengisi ruang yang tinggal dalam bekasnya tanpa menjejaskan reka letaknya.

Senario Masalah:

Bayangkan coretan HTML yang menampilkan label dan elemen input teks yang dijajarkan pada baris yang sama dalam bekas dengan lebar tetap. Matlamatnya adalah untuk menggayakan elemen input untuk mengisi baki lebar bekas sambil mengelakkan pembalut teks dan bergantung pada pengetahuan tentang saiz label.

Penyelesaian:

Kuncinya kepada penyelesaian ini terletak pada merangkum medan input dalam rentang dengan sifat paparannya ditetapkan kepada "sekat." Selain itu, elemen butang (jika ada) harus diletakkan sebelum medan input.

Seterusnya, butang harus diapungkan ke kanan, menyebabkan medan input menduduki ruang yang tinggal. Pendekatan ini memastikan elemen input mengembang dengan lancar untuk mengisi lebar bekas tanpa menjejaskan kedudukan atau penampilan elemen lain.

Kod Contoh:

Pertimbangkan coretan kod berikut :

<div>

Dalam contoh ini, bekas borang ditetapkan pada lebar 500px. Butang diapungkan ke kanan dan medan input merentangi baki lebar bekas.

Dengan melaksanakan penyelesaian ini, pembangun boleh dengan mudah memanjangkan lebar elemen input untuk memadankan sempadan bekas mereka, mencipta visual menarik dan bentuk berfungsi tanpa memerlukan JavaScript atau susun atur jadual yang kompleks.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Medan Input Menjangkau Keseluruhan Lebar Bekasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!