Comment puis-je faire un élément de saisie occuper toutes les autres lignes de l'espace?

Question

Voici le code:

<div style="width:400px">
    some text..
    <input type="text" />
    <button value="click me" />
</div>

Comment puis-je faire de l'élément d'entrée s'étendre à remplir tout l'espace restant, en restant sur la même ligne? Si je mets 100%, il va à une ligne de sa propre...

Answer 1

Voir: http://jsfiddle.net/thirtydot/rQ3xG/466/

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

HTML:

<div class="formLine">
    <button>click me</button>
    <label>some text.. </label>
    <span><input type="text" /></span>
</div>

L' button doit passer en premier. Légèrement désagréable, mais c est la vie.

CSS:

.formLine {
    overflow: hidden;
    background: #ccc;
}
.formLine input {
    width: 100%;
}
.formLine label {
    float: left;
}
.formLine span {
    display: block;
    overflow: hidden;
    padding: 0 5px;
}
.formLine button {
    float: right;
}
.formLine input, .formLine button {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

L'étape clé est l'aide de overflow: hidden;: pourquoi cela est nécessaire, est expliqué au:

• http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
• Comment le CSS Bloc de mise en forme du Contexte de travail?

Le supplément de durée autour d' input est nécessaire parce qu' display:block; n'a pas d'effet pour l' input: c'est Quoi dans le fichier CSS/DOM qui empêche une zone de saisie avec display: block à partir de l'expansion de la taille de son conteneur

Answer 2

Si vous voulez un cross-browser décision, vous pouvez utiliser le tableau

<table>
  <tr>
    <td>some text</td>
    <td><input type="text" style="width:100%" /></td>
    <td><button value="click me" /></td>
  </tr>
</table>

Si vous ne pouvez pas utiliser le tableau qu'il serait plus difficile. Par exemple, si vous savez exactement à la largeur du texte, vous pouvez essayer de cette façon:

<div style="padding:0px 60px 0px 120px;">
  <div style="width:120px; float:left; margin:0px 0px 0px -120px;">some text</div>
  <input type="button" style="width:50px; float:right; margin:0px -55px 0px 0px;" />
  <input type="text" style="width:100%;" />
</div>

Answer 3

Avez-vous essayé d'ajouter

display: block