Étiquette et mise en page d'entrée en utilisant css

Question

Je suis en train d'aligner une étiquette et une boîte d'entrée sur la même ligne de telle sorte que l'étiquette prend tout l'espace dont il a besoin, puis la zone de saisie utilise tous le reste espace. Par exemple, si le conteneur était 1000px et que l'étiquette était 342px, l'entrée devrait avoir une largeur de 658px. Mais si l'étiquette a changé à 100px, l'entrée devrait être redimensionnée à 900px. Je pourrais le faire en utilisant une disposition de table, ou en utilisant JavaScript pour redimensionner la boîte de saisie lorsque la largeur de l'étiquette change, mais idéalement, je voudrais le faire en utilisant seulement css. Mon html ressemble à ceci.

<div id="container"> 
    <label for="inputBox">variable text</label> 
    <input type="text" id="inputBox" /> 
</div> 

Merci,

Edit: Pour illustrer ce que je suis en train de faire ici est un exemple en utilisant des tables.

<table style="background-color:#ddd;width:500px;"> 
    <tr> 
    <td style="width:0;white-space:nowrap;"><label style="width:100%">text</label></td> 
    <td><input style="width:100%" type="text" /></td> 
    </tr> 
</table> 

Answer 1

La manière correcte serait:

#container { width: 1000px; display: table } 
#container label { display: table-cell; white-space: nowrap; } 
#inputBox { width: 100%; display: table-cell; } 

mais qui ne fonctionne pas dans IE 6 ou 7.

Answer 2

Ce CSS devrait fonctionner:

#container { width: 1000px; white-space: nowrap; } 
#inputBox { width: 100%; } 

Bien sûr, vous pouvez régler la largeur du conteneur en fonction de vos besoins.

EDIT: La CSS ci-dessus étend le inputBox à 1000px et rend donc la largeur div plus grande que nécessaire. Pour obtenir l'effet que vous voulez, vous pouvez utiliser la propriété de débordement comme décrit dans http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ et un peu d'un balisage supplémentaire:

<div id="container"> 
    <label for="inputBox">variable text</label> 
    <div><input type="text" id="inputBox" /></div> <!-- Notice the input is wrapped in an additional div --> 
</div> 

Le CSS:

#container { width: 1000px; white-space: nowrap; } 
#container label { float: left; margin-right: 5px; /* The label must be a floating element, the margin adds a little space to visually separate it from the input field */ } 
#container div { overflow: hidden; /* This does the trick */ } 
#inputBox { width: 100%; } 

Answer 3

#container { margin-left: 100px; position: relative; } 
#container label { position: absolute; left: -100px; } 
#container input { width: 100%; } 

(Vous pouvez utiliser box-sizing et ses versions spécifiques au navigateur pour vous assurer que les frontières de la ligne d'entrée vers le haut bien si nécessaire, et si vous avez besoin que IE6-7 aussi, un tas de hacks de rembourrage pour accueillir les pixels supplémentaires.)

Cela nécessite que la taille de l'étiquette soit connue. Il ne peut pas être fait dépendre de la largeur du contenu du texte de label (c'est-à-dire 'shrink-wrap') sans un tas de balisage supplémentaire (qui ne serait pas vraiment mieux que l'utilisation de tables).

Lorsque les formes liquides mise en page se plus compliqué que cela, vous ne ont généralement besoin d'aller aux tables. Le positionnement CSS traditionnel n'est pas idéal pour répartir des largeurs entre des contenus fixes, liquides et rétractables.