Girdisinin kalan genişliğini dolduracak şekilde stil girdisi öğesi

Diyelim ki böyle bir html snippet'im var:

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

Bu benim tam kodum değil, ama önemli olan, sabit genişlikli bir kapta aynı satırda bir etiket ve metin girişi olması. Girdiyi, ambalajın boyutunu etiketini bilmeden sarmadan ve dolduracak şekilde nasıl doldurabilirim?

herkes mizanpaj için tablolardan nefret ettikçe, açık tablo etiketleri veya display: table-cell kullanarak bu tür şeylere yardımcı olurlar.

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

İşte JavaScript veya tablo düzeni kesmek kullanmadan basit ve temiz bir çözüm. Bu cevaba benzer: Girilen metin otomatik genişlik% 100 diğer öğelerle doluyor

Giriş alanını bir açıklık ile sarmak önemlidir display:block. Bir sonraki şey, düğmenin önce ve giriş alanının ikinci olması gerektiğidir.

Ardından düğmeyi sağa kaydırabilirsiniz ve giriş alanı kalan alanı doldurur.

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>

Basit bir keman: http://jsfiddle.net/v7YTT/90/

Güncelleme 1: Web siteniz yalnızca modern tarayıcıları hedefliyorsa, esnek kutular kullanmanızı öneririm . Burada mevcut desteği görebilirsiniz .

Güncelleme 2: Bu, giriş alanıyla tamı paylaşan birden fazla düğme veya diğer öğelerle bile çalışır. İşte bir örnek .

Flexbox kullanmanızı öneririm:

Yine de uygun satıcı öneklerini eklediğinizden emin olun!

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>

Lütfen bunun için flexbox kullanın. Çocuklarını arka arkaya bükecek bir konteynerin var. İlk çocuk gerektiğinde yerini alır. İkincisi, kalan tüm alanı almak için esner:

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

Bunu başarmanın en kolay yolu:

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>

Görünüşe göre: http://jsfiddle.net/JwfRX/

Çok kolay hile bir CSS calcformül kullanıyor . Tüm modern tarayıcılar, IE9, çok çeşitli mobil tarayıcılar bunu desteklemelidir.

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

bunu deneyebilirsiniz:

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>

Bootstrap 4 kullanıyorsanız:

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

Daha da iyisi, Bootstrap'ta yerleşik olanları kullanın:

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