L'entrée CSS prend l'espace restant

Question

Je voudrais aligner une étiquette et une zone de texte d'entrée dans la même ligne. et je voudrais que la largeur d'entrée s'adapter au reste de l'espace (dans le div de contenu), selon le texte de l'étiquette de la profession (voir 1). J'ai essayé d'utiliser la largeur:automatique pour l'entrée, mais il semble rester sur une largeur constante, j'ai essayé aussi width:100%, mais je suis de l'avis (2).

qui sont les propriétés css à utiliser pour les atteindre mon but?

Answer 1

C'est possible sans JavaScript, voir: http://jsfiddle.net/Khmhk/

Cela fonctionne dans IE7+, et tous les navigateurs modernes.

HTML:

<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>

CSS:

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

La raison pourquoi overflow: hidden est donc comme par magie utile dans ce cas est expliqué ici.

---

display: table-cell est une autre option, voir: http://jsfiddle.net/Khmhk/1/

Cela fonctionne dans IE8+ et tous les navigateurs modernes:

HTML:

<div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text" /></span>
</div>

CSS:

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}