Question

When creating a new asp.net mvc3 app you get the logon and register form with a label above the text field.
I want to change it so that both the label and field are on the same line and aligned

The following doesn’t work

@using (Html.BeginForm()) {
<div>
    <fieldset>
        <legend>Account Information</legend>

        <div class="editor-label">
            @Html.LabelFor(m => m.UserName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.UserName)
            @Html.ValidationMessageFor(m => m.UserName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(m => m.Password)
        </div>
        <div class="editor-field">
            @Html.PasswordFor(m => m.Password)
            @Html.ValidationMessageFor(m => m.Password)
        </div>

        <div class="editor-label">
            @Html.CheckBoxFor(m => m.RememberMe)
            @Html.LabelFor(m => m.RememberMe)
        </div>

        <p>
            <input type="submit" value="Log On" />
        </p>
    </fieldset>
</div>

CSS:

.display-label, 
.editor-label 
{
      display:inline-block;
      width: 200px;    
      text-align: right;   
      margin-right: 10px;

}

.display-field, 
.editor-field 
{
    display:inline-block;
     margin: 0.5em 0 0 0;
}

Answer 1

I typically float my label left and the input lines up next to it. Here’s an example: http://jsfiddle.net/qXFLa/

Here’s an example of how I’d rearrange your code:

<div class="editor">
  @Html.LabelFor(m => m.UserName)
  @Html.TextBoxFor(m => m.UserName)
  @Html.ValidationMessageFor(m => m.UserName)
</div>

Then, for your css:

.editor label {
  float: left;
  width: 30px;   // just putting an example here - but give them a width to align better
  text-align: right; // this right-aligns them with the input
}

.editor input[type=text] {
  width: 80px; // just putting an example value in here to make your inputs uniform in length
  margin: 0 0 0 10px; // just some breathing room from the labels
}