Comment faire en sorte que plusieurs blocs en ligne puissent être étendus sur toute la largeur du conteneur?

Quelle est la meilleure façon de mettre en œuvre le champ de saisie et le comportement de la touche comme montré ici:
Comment faire en sorte que plusieurs blocs en ligne puissent être étendus sur toute la largeur du conteneur?

source d'informationauteur panfil

  1. 12

    J'aime la réponse de ScottS, mais juste pour avoir une alternative: vous pouvez utiliser le tableau comme le comportement dans le CSS:

    CSS

    .formline{
    display: table;
}
.txt{
    display: table-cell;
    width: 100%;
}
input[type=text]{
    -moz-box-sizing: border-box; box-sizing: border-box;
    width: 100%;
}​

    HTML

    <div class=formline>
    <div class=txt>
        <input type=text>
    </div>
    <input type=submit value=submit>
</div>

    http://jsfiddle.net/willemvb/VaFSP/

  2. 11

    Oui, avec du code html et css en place qui utilise de la magie entre float et overflow: hiddenvous peut le constater dans ce violon.

    HTML

    <div class="container">
    <div>Some Text</div>
    <form>
        <button>MyButton</button>
        <div class="stretcher"><input type="text" /></div>
    </form>
</div>

    CSS

    .stretcher {
    overflow: hidden;
}

button {
    float: right;
}

input {
    width: 100%;
}