web-dev-qa-db-fra.com

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

Comment atteindre les objectifs suivants:

┌────────────────────parent────────────────────┐
│ label [text-box                   ] [button] │
│ paragraph                                    │
└──────────────────────────────────────────────┘
  • label est aligné à gauche
  • button est aligné à droite
  • text-box occupe toute la largeur restante dans le parent
  • paragraph est aligné à gauche, doit également être aligné à gauche avec label

label et button doivent tous deux respecter autant que possible les propriétés de police définies ailleurs. parent est centré dans la fenêtre et, naturellement, peut avoir une largeur arbitraire.

S'il vous plaît donnez votre avis.

blockcss
38
user422039

Mise à jour [octobre 2016]: version Flexbox ...

form {
  display: flex;
}
form input[type="text"] {
  flex: 1;
}
<form>
  <label>Name</label>
  <input type="text" />
  <button>Submit</button>
</form>
<p>Lorem ipsum...</p>

Réponse originale [avril 2011]: version CSS sans table (du comportement de table) ...

<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;
}

Démo: http://jsfiddle.net/wdm954/626B2/4/

50
wdm

Je n'aime pas la première réponse avec la version "table-less" qui utilise réellement table-cell. Ni la deuxième réponse qui utilise des tables réelles. Ni troisième réponse qui utilise des largeurs codées en dur. Voici la solution en utilisant flex . C'est de loin le plus simple:

#parent {
  display: flex;
}
input {
  flex: 1;
}
<div id="parent">
  <label>Name</label>
  <input type="text" />
  <button>Button</button>
</div>
<div>paragraph</div>

12
asdjfiasd

Utilisez des tableaux. : D Je sais que les gens ont tendance à détester les tables, mais ils vont travailler 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>
9
Thomas Shields

N'oubliez pas que vous pouvez utiliser calc(). Supposons que la largeur totale utilisée par label et button est 100px (marge comprise), la largeur est alors:

.text-box {    
  width: calc(100% - 100px);
}

Si vous pensez qu'il ne supporte pas beaucoup de navigateur, vous vous trompez. Il supporte beaucoup maintenant. Le temps a changé

2
Aminah Nuraini

La seule façon pour moi d’atteindre ceci ou un résultat similaire, est d’avoir la "zone de texte" comme un élément de bloc qui remplirait automatiquement toute la largeur du parent, puis d’appliquer un remplissage à gauche et à droite égal à la largeur totale de les conteneurs à gauche et à droite. Ensuite, faites en sorte que les éléments "label" et "button" aient la position relative et les ramener à l'endroit où ils doivent être (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 les éléments de bouton et d'étiquette n'ont pas besoin d'avoir une largeur définie, tous les éléments peuvent simplement avoir leur largeur sous forme de pourcentage (la totalité pouvant atteindre 100%).

2
Marty

Cela fonctionne sans flex ni tables si assignerfloat: rightet mettre le bouton (ou plusieurs boutons en ordre inverse) avant le champ de saisie.

Placez ensuite l’étiquette avecfloat: left, entrez le champ de saisie 100% width et placez - le dans un span avecdisplay: blocketoverflow: hidden.

Aucune magie impliquée:

<div style="width:100%">
  <button style="float:right">clickme 2</button>
  <button style="float:right">clickme 1</button>
  <label style="float:left">label</label>
  <span style="display:block;overflow:hidden">
    <input type="text" style="width:100%"/>
  </span>
</div>

L'idée de base que tous les boutons de droite sont spécifiés avant la zone de saisie dans l'ordre inverse.

0
Brian Haak