Bagaimana untuk Membuat Elemen Input Mengisi Baki Lebar Bekasnya?

Cara Menggayakan Elemen Input agar Sesuai dengan Baki Lebar Bekasnya

Anda mungkin sering menghadapi situasi di mana anda mempunyai elemen input bersama label dalam tetap- bekas lebar. Objektifnya ialah agar medan input melaraskan lebarnya secara dinamik untuk mengisi ruang yang tinggal tanpa menyebabkan sebarang pemutusan baris.

Penyelesaian CSS

borang {

width: 500px;
overflow: hidden;
background-color: yellow;

}
masukan {

width: 100%;

}
span {

display: block;
overflow: hidden;
padding-right:10px;

}
butang {

float: right;

}

 <button>Search</button>
 <span><input type="text" title="Search" /></span>

Penyelesaian ini menggunakan beberapa teknik utama:

• Elemen input dibalut dalam span dengan paparan : sifat blok, menetapkannya supaya berkelakuan seperti elemen peringkat blok.
• Span juga mempunyai sifat limpahan: tersembunyi untuk mengelakkan sebarang limpahan input berlebihan daripada kelihatan.
• Butang diapungkan ke kanan, menyebabkannya diposisikan sendiri di bahagian paling kanan bekas.
• Lebar elemen input ditetapkan kepada 100%, dengan berkesan mengisi baki lebar dalam borang.

Pendekatan ini menyediakan cara yang mudah dan berkesan untuk mensaiz elemen input secara dinamik agar sesuai dengan lebar yang tinggal, tanpa mengira label panjang.

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