Label and textbox on the same line + textbox on the whole width

Question

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.

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?

Answer 1

That's a purely HTML/CSS question that has nothing to do with ASP.NET MVC. I would recommend you the following article for creating nice HTML forms with CSS.

So in your case you could float: left the label and define it a fixed width. Just as illustrated in this live demo I wrote for you:

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

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

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