0

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

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

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

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没有这个。是因为 textarea 是一个容器标签，而 input 不是吗？有没有办法解决这个问题？我宁愿不需要任何辅助标记，例如额外的 span、div 等。

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

非常感谢任何帮助。

4

2 回答 2

1

如果你可以使用 jQuery

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

小提琴

于 2013-10-03T07:47:25.233 回答
0

这似乎是不可能的，我不知道为什么。

我通过在每个输入字段周围添加一个消耗所有剩余空间的 div 来解决这个问题，然后我将包含的输入字段的宽度设置为 100%。

.wrapper {
    margin-left: 200px;
}
input[type="text"], textarea {
    display: block;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

请参阅 jsFiddle：http: //jsfiddle.net/7UdLh/

于 2013-10-22T09:09:22.010 回答