Bagaimana untuk Membuat Ruang Input Mengisi Baki Ruang dalam Bekas Lebar Tetap?

Mencapai Lebar Bendalir untuk Elemen Input dalam Bekas Lebar Tetap

Soalan:

Bagaimana bolehkah medan input digayakan untuk menduduki baki ruang yang tersedia dalam bekas lebar tetapnya, tanpa pembalut teks atau keperluan untuk menentukan saiz label terlebih dahulu?

Jawapan:

Untuk mencapai kesan ini, pertimbangkan perkara berikut:

1. Span Pembungkus: Balut medan input dalam set elemen span untuk dipaparkan: blok.
2. Tertib Kedudukan: Letakkan "butang" (atau elemen lain) sebelum medan input.
3. Terapung: Terapungkan "butang" (atau elemen lain) ke kanan untuk benarkan medan input mengisi ruang yang tinggal.

Contoh Kod:

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

form {
  width: 500px;
  overflow: hidden;
  background-color: yellow;
}

input {
  width: 100%;
}

span {
  display: block;
  overflow: hidden;
  padding-right: 10px;
}

button {
  float: right;
}

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