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

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

39 голосов
/ 29 апреля 2011

Как добиться следующего: 

┌────────────────────parent────────────────────┐
│ label [text-box                   ] [button] │
│ paragraph                                    │
└──────────────────────────────────────────────┘
  • label выровнен влево
  • button выровнено вправо
  • text-box занимает всю оставшуюся ширину в пределах родительского элемента
  • paragraph выровнен по левому краю, должен быть выровнен по левому краю с label тоже

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

Пожалуйста, сообщите.

Ответы [ 6 ]

52 голосов
/ 29 апреля 2011

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

13 голосов
/ 07 июля 2015

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

#parent {
  display: flex;
}
input {
  flex: 1;
}
<div id="parent">
  <label>Name</label>
  <input type="text" />
  <button>Button</button>
</div>
<div>paragraph</div>
10 голосов
/ 29 апреля 2011

Используйте таблицы.: 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>
2 голосов
/ 02 июля 2016

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

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

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

2 голосов
/ 29 апреля 2011

Единственный способ, которым я знаю, как добиться этого или подобного, - это иметь «текстовое поле» в качестве элемента блока, который автоматически заполнит всю ширину родительского элемента, а затем применить отступ слева и справа, равный общая ширина контейнеров слева и справа. Затем сделайте так, чтобы элементы «label» и «button» имели положение, установленное как относительно , и поместите их туда, где они должны быть (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%).

0 голосов
/ 02 марта 2017

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

Затем поместите метку с 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>

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

...