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

Question

Disons que j’ai un extrait de code html comme ceci :

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

Answer 1

Voici une simple et propre solution sans l'aide de JavaScript ou de disposition de table de hacks. Il est semblable à cette réponse: Entrée de texte automatique de la largeur de remplissage de 100% avec d'autres éléments flottants

Il est important pour envelopper le champ de saisie avec un span qui est display:block. La prochaine chose est que le bouton être le premier et le champ d'entrée de seconde.

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

HTML

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

CSS

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

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

Mise à jour 1: Si votre site est ciblé vers les navigateurs modernes seulement, je suggère l'utilisation flexible des boîtes. Ici vous pouvez voir le support actuel.

Mise à jour 2: Ceci fonctionne même avec plusieurs boutons ou d'autres éléments qui partage le avec le avec le champ de saisie. Ici est un exemple.

Answer 2

comme tout le monde déteste les tableaux pour la mise en page, ils aident avec des trucs comme ça, soit à l’aide de balises explicites table ou display : table-cell

Answer 3

Je pense que la solution la plus simple est d'utiliser box-sizing: border-box sur le <input\> de l'élément et l'ensemble de ses width: 100%. Évolution box-sizing modifie la façon dont l' width attribut est appliqué. Maintenant, width est défini par la zone de bordure de l'élément, de ne pas la boîte intérieure.

En d'autres termes, si votre entrée est de rembourrage, l'élément ne sera pas de débordement de ses parents car le changement de box-sizing a modifié la définition de la largeur d'inclure le rembourrage et des frontières, et pas seulement la partie intérieure de l'élément.

Cela semble être la façon dont Bootstrap t-il.

Par exemple:

HTML

<form method="post">
  <input type="text" />
</form>

CSS

form {
  width: 500px;
  padding: 10px 30px;
  border: 1px solid black;
}

input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 50px;
}

Voici le résultat de ce HTML/CSS

JS Fiddle Lien

Facile comme bonjour. Si vous souhaitez remplir entièrement le formulaire parent, il suffit de retirer son rembourrage!

Answer 4

Meilleure façon d’y parvenir serait :

CSS :

HTML :

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