Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mengisi Baki Lebar Bekas dengan Elemen Input?

Bagaimana untuk Mengisi Baki Lebar Bekas dengan Elemen Input?

Susan Sarandon
Susan Sarandonasal
2024-11-13 00:07:02731semak imbas

How to Fill the Remaining Width of a Container with an Input Element?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn