Elemen input gaya untuk mengisi sisa lebar wadahnya

Katakanlah saya memiliki cuplikan html seperti ini:

<div style="width:300px;">
    <label for="MyInput">label text</label>
    <input type="text" id="MyInput" />
</div>

Ini bukan kode persis saya, tetapi yang penting adalah ada label dan input teks pada baris yang sama dalam wadah dengan lebar tetap. Bagaimana cara mengatur input untuk mengisi sisa lebar wadah tanpa pembungkus dan tanpa mengetahui ukuran label?

sama seperti semua orang membenci tabel untuk tata letak, mereka membantu dengan hal-hal seperti ini, baik menggunakan tag tabel eksplisit atau menggunakan tampilan: sel-tabel

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

Berikut ini adalah solusi sederhana dan bersih tanpa menggunakan JavaScript atau hack tata letak tabel. Ini mirip dengan jawaban ini: Input lebar teks otomatis mengisi 100% dengan elemen lain mengambang

Penting untuk membungkus bidang input dengan rentang yang display:block. Hal berikutnya adalah tombol harus didahulukan dan kolom input kedua.

Kemudian Anda dapat melayang tombol ke kanan dan bidang input mengisi ruang yang tersisa.

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>

Biola sederhana: http://jsfiddle.net/v7YTT/90/

Pembaruan 1: Jika situs web Anda ditargetkan hanya untuk peramban modern, saya sarankan menggunakan kotak fleksibel . Di sini Anda dapat melihat dukungan saat ini .

Pembaruan 2: Ini bahkan berfungsi dengan beberapa tombol atau elemen lain yang berbagi sepenuhnya dengan bidang input. Berikut ini sebuah contoh .

Saya sarankan menggunakan Flexbox:

Pastikan untuk menambahkan awalan vendor yang tepat!

form {
  width: 400px;
  border: 1px solid black;
  display: flex;
}

input {
  flex: 2;
}

input, label {
  margin: 5px;
}

<form method="post">
  <label for="myInput">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input"/>
</form>

Silakan gunakan flexbox untuk ini. Anda memiliki wadah yang akan melenturkan anak-anaknya menjadi satu baris. Anak pertama mengambil ruangnya sesuai kebutuhan. Yang kedua melenturkan untuk mengambil semua ruang yang tersisa:

<div style="display:flex;flex-direction:row">
    <label for="MyInput">label&nbsp;text</label>
    <input type="text" id="MyInput" style="flex:1" />
</div>

Cara termudah untuk mencapai ini adalah:

CSS:

label{ float: left; }

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

span > input{ width: 100%; }

HTML:

<fieldset>
    <label>label</label><span><input type="text" /></span>
    <label>longer label</label><span><input type="text" /></span>
</fieldset>

Sepertinya: http://jsfiddle.net/JwfRX/

Trik yang sangat mudah adalah menggunakan CSS calcformula. Semua browser modern, IE9, berbagai browser seluler harus mendukung ini.

<div style='white-space:nowrap'>
  <span style='display:inline-block;width:80px;font-weight:bold'>
    <label for='field1'>Field1</label>
  </span>
  <input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>

Anda dapat mencoba ini:

div#panel {
    border:solid;
    width:500px;
    height:300px;
}
div#content {
	height:90%;
	background-color:#1ea8d1; /*light blue*/
}
div#panel input {
	width:100%;
	height:10%;
	/*make input doesnt overflow inside div*/
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	/*make input doesnt overflow inside div*/
}

<div id="panel">
  <div id="content"></div>
  <input type="text" placeholder="write here..."/>
</div>

Jika Anda menggunakan Bootstrap 4:

<form class="d-flex">
  <label for="myInput" class="align-items-center">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>

Lebih baik lagi, gunakan apa yang ada di dalam Bootstrap:

  <form>
    <div class="input-group">
      <div class="input-group-prepend">
        <label for="myInput" class="input-group-text">Default</label>
      </div>
      <input type="text" class="form-control" id="myInput">
    </div>
  </form>

https://jsfiddle.net/nap1ykbr/