Можно ли создать форму с полями ввода, заполняющими все доступное пространство?

Question

Я пытаюсь создать следующий макет:

http://jsfiddle.net/BTuMH/1/

, но без настройки ширины, например:

http://jsfiddle.net/yuGyg/

это возможно?

Answer 1

http://jsfiddle.net/BTuMH/3/

Избавься от этих дивов, они тебе не нужны? Я возился с более чистой версией. Переместите метку (да, вы можете использовать элемент label вместо div с классом label) и использовать css, чтобы задать максимальную ширину input.

Обновление:

Это работает только для Firefox. Это не работает для webkit. Я надеялся, что используя display: block; для элемента input, он вычислит его ширину, взяв максимальное пространство, доступное за плавающим label. Это не работает. Я думаю, вам придется использовать javascript, чтобы установить ширину после рендеринга страницы.

Еще одно обновление: Я заставил это работать!

См. http://jsfiddle.net/BTuMH/4/

При overflow: hidden; в оболочке div элемент ввода может получить ширину 100%, где ширина 100% - ширина div. Он не работал раньше, потому что пространство за плавающим элементом также было занято div, с помощью overflow:hidden; исправляет это.