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

Как добиться следующих результатов:

┌────────────────────parent────────────────────┐
│ label [text-box                   ] [button] │
│ paragraph                                    │
└──────────────────────────────────────────────┘

label выровнен по левому краю
button выравнивается вправо
text-box занимает всю оставшуюся ширину внутри родительского
paragraph выравнивается влево, также необходимо выравнивать по левому краю с помощью label

Оба label и button должны подчиняться свойствам шрифта, определенным в другом месте максимально возможного. parent выравнивается по центру в окне и, естественно, может иметь произвольную ширину.

Просьба сообщить.

Ответы

Ответ 1

Обновлено [окт. 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>

Ответ 2

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

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

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

Ответ 3

Использовать таблицы.: 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>

Ответ 4

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

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

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

Ответ 5

Единственный способ, которым я знаю, как достичь этого или аналогичного, - это иметь "текстовое поле" в качестве элемента блока, который автоматически заполняет всю ширину родителя, а затем применяет отступ слева и справа, равный общая ширина контейнеров слева и справа. Затем добавьте элементы "label" и "button" в положение relative и поместите их туда, где они должны быть (float: left, float: right).

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

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%).

Ответ 6

Он работает без 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>