Как сделать несколько элементов inline-block, чтобы растянуть всю ширину контейнера?

Каков наилучший способ реализации поля ввода и поведения кнопок, как показано здесь:

Ответ 1

Мне нравится ответ ScottS, но просто для того, чтобы иметь альтернативу: вы можете использовать табличное поведение в 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

Да, с некоторыми html и css на месте, что использует некоторую магию между float и overflow: hidden, вы может видеть, что он работает в этой скрипте.

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