Как сделать input на всю оставшуюся ширину?

Question

[Moe Green]

Приветствую!

Имеется такой макет - take.ms/XtQmY. И такая разметка - codepen.io/gearmobile/pen/jEMPRN.

Label имеет плавающую ширину, как это очевидно.
Не могу сообразить, как сделать input на всю оставшуюся ширину блока-контейнера?

Answer 1

[Maxim Zhgulev]

codepen.io/anon/pen/ZYpbEO

fieldset span {
  display: table;
  width: 100%;
}
fieldset label,
fieldset input {
  display: table-cell;
}
fieldset label {
  width: 1%;
  white-space: nowrap;
  padding-right: 10px;
}
fieldset input {
  width: 99%;
}

Comments

[Moe Green]

круто! я смотрел в эту сторону (таблицы), но не досмотрел, однако! )) До этого я бы не додумался, ибо просто не знал - width: 1%; Получается - задается примерная ширина ячейки. Фактическая же ширина получается - по контенту + pd:r. Спасибо огромное! ))

[Moe Green]

white-space: nowrap; - гарантировать, чтобы в одну строку была ячейка, ибо она ячейка таблицы, поэтому. Прикольно - себе в копилку однозначно! ))

[Maxim Zhgulev]

Рад помочь.
Если есть возможность внести изменения в разметку, то лучше все же обернуть label и input блоками и уже им назначить display: table-cell, а у input в свою очередь сделать width: 100%. Так будет эстетичнее.

[Moe Green]

width: 100%; - тоже надо обязательно, ибо - таблица ))

[Moe Green]

e_s_l: ок. за это тоже - спасибо! )

Answer 2

[Сергей Мельников]

jsbin.com/xaxeso/2/edit?css,output

Answer 3

[Алексей Куреев]

Либо вручную, либо через flex, однако этого не будут поддерживать старые версии IE.