Как сделать так, чтобы поле ввода текста занимало всю оставшуюся ширину в родительском блоке?

Обновлено [октябрь 2016 г.]: версия 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>

Исходный ответ [апрель 2011 г.]: версия CSS без таблиц (поведения таблицы)...

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

Демонстрация: http://jsfiddle.net/wdm954/626B2/4/

Мне не нравится первый ответ с версией «без таблицы», которая фактически использует ячейку таблицы. Ни второй ответ, который использует фактические таблицы. Ни третий ответ, который использует жестко закодированную ширину. Вот решение с использованием flex. Это намного проще:

#parent {
  display: flex;
}
input {
  flex: 1;
}

<div id="parent">
  <label>Name</label>
  <input type="text" />
  <button>Button</button>
</div>
<div>paragraph</div>

Используйте таблицы. :D Я знаю, что люди склонны ненавидеть столы, но в этой ситуации они сработают...

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

Единственный способ, которым я знаю, как добиться этого или подобного, - это иметь «текстовое поле» в качестве блочного элемента, который автоматически заполнит всю ширину родителя, а затем применит отступ слева и справа, равный общей ширине контейнеры слева и справа. Затем сделайте так, чтобы для элементов «метка» и «кнопка» была задана позиция как относительная, и перемещайте их туда, где они должны быть (плавать: слева, плавать: справа).

Что-то вроде,

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

Если элементы кнопки и метки не должны иметь установленную ширину, все элементы могут просто иметь свою ширину в виде процентного значения (все в сумме до 100%).

Не забывайте, вы можете использовать calc(). Предположим, что общая ширина, используемая label и button, составляет 100 пикселей (включая поля), тогда ширина равна:

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

Если вы думаете, что он не поддерживает многие браузеры, вы действительно ошибаетесь. Сейчас очень многое поддерживает. Время изменилось

Без flex и таблиц работает, если назначить float: right и поставить кнопку (или несколько кнопок в обратном порядке) перед полем ввода.

Затем поместите метку с помощью float: left, задайте поле ввода 100 % ширины и оберните его внутри span с помощью display: block. и overflow: hidden.

Никакой магии:

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

Основная идея заключается в том, что все правые кнопки указываются перед полем ввода в обратном порядке.