Élément d'entrée de style pour remplir la largeur restante de son conteneur

Disons que j'ai un extrait html comme celui-ci:

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

Ce n'est pas mon code exact, mais l'important est qu'il y ait une étiquette et une entrée de texte sur la même ligne dans un conteneur à largeur fixe. Comment puis-je styliser l'entrée pour remplir la largeur restante du conteneur sans emballage et sans connaître la taille de l'étiquette?

autant que tout le monde déteste les tableaux pour la mise en page, ils aident avec des trucs comme celui-ci, soit en utilisant des balises de tableau explicites, soit en utilisant display: table-cell

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

Voici une solution simple et propre sans utiliser de hacks JavaScript ou de disposition de table. Il est similaire à cette réponse: saisie de la largeur automatique du texte de saisie à 100% avec d'autres éléments flottants

Il est important d'envelopper le champ de saisie avec une plage qui est display:block. La prochaine chose est que le bouton doit venir en premier et le champ de saisie en second.

Ensuite, vous pouvez faire flotter le bouton vers la droite et le champ de saisie remplit l'espace restant.

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>

Un simple violon: http://jsfiddle.net/v7YTT/90/

Mise à jour 1: Si votre site Web est destiné uniquement aux navigateurs modernes, je suggère d'utiliser des boîtes flexibles . Ici vous pouvez voir le support actuel .

Mise à jour 2: Cela fonctionne même avec plusieurs boutons ou autres éléments qui partagent pleinement avec le champ de saisie. Voici un exemple .

Je suggère d'utiliser Flexbox:

Assurez-vous cependant d'ajouter les préfixes de fournisseur appropriés!

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>

Veuillez utiliser flexbox pour cela. Vous avez un conteneur qui va plier ses enfants en ligne. Le premier enfant prend son espace au besoin. Le second fléchit pour prendre tout l'espace restant:

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

Le moyen le plus simple d'y parvenir serait:

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>

Ressemble à: http://jsfiddle.net/JwfRX/

L'astuce très simple consiste à utiliser une CSS calcformule. Tous les navigateurs modernes, IE9, une large gamme de navigateurs mobiles devraient prendre en charge cela.

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

vous pouvez essayer ceci:

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>

Si vous utilisez 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>

Mieux encore, utilisez ce qui est intégré à 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/