CSS 标签和文本框在同一行+整个宽度上的文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7858539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Label and textbox on the same line + textbox on the whole width
提问by Bronzato
By default in ASP.NET MVC, when the system generate views (scaffolding) we have the label on one line and the textbox on the next line. I would like to have the label and the textbox on the same line and having the textbox on the whole width (100%). I try to achieve this without success.
默认情况下，在 ASP.NET MVC 中，当系统生成视图（脚手架）时，我们在一行上有标签，在下一行有文本框。我希望标签和文本框在同一行上，并且文本框在整个宽度上（100%）。我试图实现这一目标但没有成功。
I found some similar posts but not allowing me to have the textbox on the whole width!
我发现了一些类似的帖子，但不允许我在整个宽度上都有文本框！
Here is what I want:
这是我想要的：
So, by default I have:
所以，默认情况下我有：
<div class="editor-label"> @Html.LabelFor(model => model.Descr) </div>
<div class="editor-field"> @Html.EditorFor(model => model.Descr) </div>
<div class="editor-label"> @Html.LabelFor(model => model.Year) </div>
<div class="editor-field"> @Html.EditorFor(model => model.Year) </div>
Any idea?
任何的想法？
回答by Darin Dimitrov
That's a purely HTML/CSS question that has nothing to do with ASP.NET MVC. I would recommend you the following articlefor creating nice HTML forms with CSS.
这是一个纯粹的 HTML/CSS 问题，与 ASP.NET MVC 无关。我会向您推荐以下文章，以使用 CSS 创建漂亮的 HTML 表单。
So in your case you could float: leftthe label and define it a fixed width. Just as illustrated in this live demoI wrote for you:
因此，在您的情况下，您可以float: left使用标签并将其定义为固定宽度。正如我为您编写的这个现场演示所示：
.editor-label {
float: left;
width: 200px;
}
.editor-field {
margin-left: 200px;
}
.editor-field input {
width: 100%;
}
回答by Equbal Siddiqui
This is the correct answer:both label and textboxes are in the same line
.editor-label{
float: left;
width: 100%;
margin-bottom:-20px;
}
.editor-field
{
margin-left: 120px;
margin-bottom:-5px;
}
.display-label {
float: left;
padding: 0;
width: 160px;
}
