Bagaimana untuk Mengisi Baki Lebar Bekas dengan Elemen Input?

Mengisi Baki Lebar Bekas dengan Elemen Input

Apabila label input dan medan teks berkongsi satu baris dalam bekas lebar tetap, gayakan medan input untuk mengisi lebar baki secara optimum boleh menjadi satu cabaran. Berikut ialah penyelesaian serba boleh tanpa bergantung pada JavaScript atau helah susun atur jadual yang tidak boleh dipercayai:

Penyelesaian:

1. Balut medan input: Lampirkan medan input dalam rentang dengan paparan: blok.
2. Kedudukan flip: Letakkan elemen butang sebelum medan input.
3. Apungkan butang: Tambahkan apungan: tepat pada elemen butang.
4. Isi ruang yang tinggal: Medan input, dibalut dalam rentang, secara automatik akan menduduki ruang yang tinggal.

Contoh:

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

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

Pendekatan ini memastikan medan input mengisi lebar bekas yang tinggal walaupun tanpa mengetahui saiz label. Ia ringkas, bersih dan serasi dengan pelbagai penyemak imbas.

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