html - 告诉 input[type=text] 字段有一些 margin-left 使用所有剩余的宽度(比如宽度为 :auto does)? 的 div

Question

我尝试创建一个带有文本输入和文本区域的表单，其中标签应位于左侧，宽度为 200 像素，输入应位于右侧，使用所有可用空间。

我以这种方式列出了一个定义列表，它可以为术语提供 200px 的宽度并将其向左浮动，并为定义提供 200px 的 margin-left。这足以使定义使用所有可用宽度。在这里查看:http://jsfiddle.net/jmuheim/kjf8f/

现在我没有成功地告诉我的文本输入和文本区域以相同的方式运行。我试过 width:100%，但它太宽了，因为它有 200px 的边距。

label {
    display: block;
    margin: 0;
    background-color: green;
    float: left;
    clear: left;
    width: 200px;
}
input[type="text"], textarea {
    display: block;
    margin: 4px 0 4px 200px;
    background-color: red;
}

http://jsfiddle.net/jmuheim/WWWs3/

输入字段顶部的“边距”从何而来？文本区域没有这个。是因为 textarea 是容器标签，而 input 不是吗？有没有办法解决这个问题？我宁愿不需要任何辅助标记，例如额外的 span、div 等。

并且将标签和文本输入/区域简单地放入其自己的定义列表中并给它们都设置 100% 的宽度是否合适？这是鼓励标记，将表单输入放入定义列表吗？

非常感谢任何帮助。

Answer 1

如果你可以使用 jQuery

var block_width = $('.block').width()
var input_width = block_width -200
$('.block input, .block textarea').width(input_width)

Fiddle