Bagaimana untuk Mengisi Lebar Bekas yang Selebihnya dengan Elemen Input?

Mengisi Baki Lebar Bekas dengan Elemen Input

Dalam reka letak web tertentu, anda mungkin mempunyai label dan medan input pada baris yang sama dalam bekas dengan lebar tetap. Cabaran timbul apabila anda mahu medan input menempati baki lebar bekas tanpa membungkus atau mempunyai pengetahuan awal tentang saiz label.

Cadangan Penyelesaian

Untuk menangani cabaran ini, pertimbangkan penyelesaian berikut:

Balut medan input dengan elemen span dan tetapkan sifat paparannya kepada "sekat." Ini memastikan medan input berfungsi sebagai elemen peringkat blok.

Letakkan medan input selepas elemen butang.

Apungkan butang ke kanan.

Dengan mengikuti ini langkah, medan input secara semula jadi akan mengisi ruang yang tinggal dalam bekas tanpa membalut.

Kod 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>

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