Comment faire pour que la zone de saisie de texte occupe toute la largeur restante dans le bloc parent?

Question

Comment atteindre les objectifs suivants:

┌────────────────────parent────────────────────┐
│ label [text-box                   ] [button] │
│ paragraph                                    │
└──────────────────────────────────────────────┘

• label est aligné à gauche
• button est aligné à droite
• text-box occupe tout largeur restante à l'intérieur de parent
• paragraph est aligné à gauche, doit être aligné à gauche avec label trop

Les deux label et button doivent obéir à des propriétés de police défini ailleurs comme valeur maximale possible. parent est aligné au centre à l'intérieur de la fenêtre, et, naturellement, peuvent avoir de l'arbitraire de la largeur.

Veuillez informer.

Answer 1

Edit: Découvrez la démo pour la version CSS sans table (du comportement de la table) ...

Voici une démo: http://jsfiddle.net/wdm954/626B2/4/

 <div id="parent">
    <div id="inner">
        <label>Name</label>
        <span><input id="text" type="text" /></span>
        <input id="submit" type="button" value="Submit" />
    </div>
    <p>some paragraph text</p>
</div>
 

CSS ...

 #inner {
    display: table;
    width: 100%;
}
label {
    display: table-cell;
}
span {
    display: table-cell;
    width: 100%;
    padding: 0px 10px;
}
#text {
    width: 100%;
}
#submit {
    display: table-cell;
}
 

Answer 2

Utilisez des tableaux. : DI sait que les gens ont tendance à détester les tables, mais ils travailleront dans cette situation ...

 <div id="parent">
    <table style="width:100%">
        <tr>
            <td>label</td>
            <td style="width:100%">
                <input type="text" style="width:100%">
            </td>
            <td>
                <button>clickme</button>
            </td>
        </tr>
    </table>
</div>
 

Answer 3

La seule façon que je sais comment faire pour atteindre ce ou similaire, est d'avoir la "zone de texte" comme un élément de bloc qui serait automatiquement remplir la totalité de la largeur de la mère, puis appliquer padding à gauche et à droite égale à la largeur totale des récipients sur la gauche et la droite. Ensuite, faire le "label" et "bouton" éléments ont leur position en tant que parent et les faire flotter là où ils doivent l'être (en float: left, float: right).

Quelque chose comme,

HTML:

<div id="parent">
    <div id="label">label</div>
    <div id="button">button</div>
    <div id="text-box">
        text<br />
        text<br />
        text<br />
        text<br />
        text
    </div>
</div>

CSS:

div#label
{
    position: relative;
    float: left;
    width: 200px;
    background: #F00;
}

div#button
{
    position: relative;
    float: right;
    width: 120px;
    background: #0F0;
}

div#text-box
{
    padding-left: 200px;
    padding-right: 120px;
    background: #00F;
}

Si le bouton et éléments d'étiquetage n'avez pas besoin d'avoir un ensemble de largeur, tous les éléments n'ont que leur largeur en pourcentage de la valeur (tout en ajoutant jusqu'à 100%).