forms - 是否可以创建一个表单，其中输入字段填写所有可用空间？

Question

我正在尝试创建以下布局:

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

但是没有设置宽度，比如:

http://jsfiddle.net/yuGyg/

这可能吗？

Answer 1

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

去掉那些 div，你不需要那些？我摆弄了一个更干净的版本。 float 标签(是的，您可以使用 label 元素而不是 label 类的 div)并使用 css 给 输入最大宽度。

更新:

这只适用于 firefox。这不适用于 webkit。我希望在 input 元素上使用 display: block;，它会通过占用 float label 后面的最大可用空间来计算它的宽度。这是行不通的。我想您必须在呈现页面后使用 javascript 来设置宽度。

另一个更新:我成功了!

参见 http://jsfiddle.net/BTuMH/4/

overflow: hidden; 在 div 包装器上，输入元素可以获得 100% 宽度，其中 100% 宽度是 div< 的宽度。它之前没有工作，因为 float 元素后面的空间也被 div 占用，使用 overflow:hidden; 修复了这个问题。