整个宽度上同一行+文本框上的标签和文本框

Question

默认情况下，在ASP.NET MVC中，当系统生成视图（脚手架）时，我们在一行上有标签，在下一行有文本框。我想将标签和文本框放在同一行，并在整个宽度上设置文本框（100％）。我试图成功实现这一点。

我发现了一些类似的帖子但不允许我在整个宽度上放置文本框！

这就是我想要的：

所以，默认我有：

<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>

有什么想法吗？

Answer 1

这是一个纯粹的HTML / CSS问题，与ASP.NET MVC无关。我建议您following article用CSS创建漂亮的HTML表单。

因此，在您的情况下，您可以float: left标签并将其定义为固定宽度。就像我为你写的this live demo所示：

.editor-label {
    float: left;
    width: 200px;
}

.editor-field {
    margin-left: 200px;
}

.editor-field input {
    width: 100%;    
}

Answer 2

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;
}