Comment faire pour redimensionner automatiquement des parties d'un élément div?

Question

J'essaie de créer un petit fragment html (un élément div) composé de trois parties: une étiquette, une zone de texte et un bouton.

Dans cet élément div, l'étiquette serait à gauche (autosized), le bouton serait à droite (de nouveau, autosized) et la zone de texte occuperait tout l'espace restant dans l'élément div parent.

C'est ce que j'ai essayé (en supposant que je veux que mon div à 400 pixels de large):

<div style="width:400px"> 
    <div style="float: left">Label</div> 
    <input style="width:100%"> <!-- doesn't work --> 
    <button type='button' style='float: right'>Click</button> 
</div> 

Le problème est, ma zone de texte ne soit pas automatiquement redimensionnée. Ajouter 'width = 100%' à la zone de texte ne fonctionne pas.

Quel serait le moyen de lui faire prendre tout l'espace restant entre l'étiquette et le bouton? Idéalement, cela devrait être fait simplement en appliquant certains styles, et non en introduisant de nouveaux éléments.

(Je suppose que la question n'est pas lié uniquement à l'élément div, mais qui se trouve être mon scénario de travail.)

Answer 1

Peut-être quelque chose comme ceci sera ce que vous voulez. Oui, je sais que c'est de la triche. Et oui, je suis d'accord avec @Paul re: label, donc j'ai passé son identifiant. :)

EDIT: obligatoire Self-Referencing Demo

Attention: non testé dans tous les navigateurs.

CSS:

div { 
    display: table; 
    width: 400px; 
    white-space: nowrap; 
} 

label { 
    display: table-cell; 
    padding-right: 3px; 
    width: 1em; 
} 

input { 
    display: table-cell; 
    width: 100%; 
} 

span { 
    display: table-cell; 
    padding-left: 6px; 
    width: 1em; 
} 

HTML:

<div> 
    <label for="my-very-special-input">Label</label> 
    <input id="my-very-special-input"/> 
    <span><button type="button">Click</button></span> 
</div> 

Answer 2

La seule façon que je pouvais penser à faire ce travail était avec pourcents. J'ai enfermé tout dans des divs séparés (probablement inutiles) et ensuite assigné des pourcentages à chaque div. Jetez un oeil:

<div style="width=400px"> 
<div style="float:left; width:10%">Label</div> 
<div style="float: left; width:70%"><input style="width:100%"></div> <!-- doesn't work --> 
<div style="float: right width:20%"><button type='button' style=''>Click</button></div> 

Il est absolument pas une solution parfaite, mais nous espérons qu'il répondra à vos besoins dans une certaine mesure.

Elliott

Answer 3

-t-il aider si vous enroulez le <input> dans un <div> avec overflow: hidden?

<div style="width: 400px;"> 
    <div style="float: left;">Label</div> 
    <div style="overflow: hidden;"> 
     <input style="width: 100%;"> 
    </div> 
    <button type="button" style="float: right;">Click</button> 
</div> 

Voir xHTML/CSS: How to make inner div get 100% width minus another div width.

Et bien que ce soit hors-sujet, s'il vous plaît noter que votre étiquette devrait être, bien, un <label>.

<div style="width: 400px;"> 
    <label for="my-very-special-input" style="float: left;">Label</label> 
    <div style="overflow: hidden;"> 
     <input id="my-very-special-input" style="width: 100%;"> 
    </div> 
    <button type="button" style="float: right;">Click</button> 
</div>