Введите текст, оставшийся доступным пространством в div с кнопкой справа - PullRequest
Новая
       23

Введите текст, оставшийся доступным пространством в div с кнопкой справа

2 голосов
/ 11 ноября 2011

Существует ли простой и изящный способ сделать так, чтобы оставшееся пространство в элементе ввода оставалось в кнопке справа без указания ширины на входе ни для одной из кнопок? 

<div>
    <input type="text"/>
    <button>button</button>
</div>

Это кажется легким, но я не могу найти способ сделать это ...

здесь jsfiddle: http://jsfiddle.net/LLQQQ/

1 Ответ

1 голос
/ 11 ноября 2011

Вы можете использовать отображение таблицы / таблицы-ячейки. Это не макет на основе таблицы, поэтому люди не будут закрывать крышку. Вы устанавливаете div для отображения в виде таблицы, а затем используете селектор непосредственных потомков > *, чтобы все непосредственные дочерние элементы действовали как ячейки. Затем вы можете указать ширину ячеек, и они сделают все возможное, чтобы занять всю ширину. Мне пришлось обернуть кнопку в промежуток, потому что иначе она бы сжалась.

http://jsfiddle.net/LLQQQ/6/

<div>
    <input type="text"/>
    <span><button>button</button></span>
</div>

div {
    border: 1px solid #000;
    display: table;
    width: 100%;
}

div > * { display: table-cell; }

div > span { width: 1%;  }
div > input { width: 100%; }
...