如何對齊由MVC3 Html Helper方法生成的表單？

Question

下面是查看我談論代碼：

@model OnlineGaming.WebUI.Models.RegisterModel 

@{ 
    ViewBag.Title = "Bienvenidos!"; 
} 

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

<div id="gamesdisplay"> 

Aqui voy a mostrar lo juegos. 

</div> 

<div id="registerform"> 
    @Html.ValidationSummary(true, "No se pudo crear la cuenta.") 

    @using (Html.BeginForm()) { 
     <div>           
      <div class="editor-label"> 
       @Html.LabelFor(m => m.UserName): 

       @Html.TextBoxFor(m => m.UserName) 
       @Html.ValidationMessageFor(m => m.UserName) 
      </div> 

      <div class="editor-label"> 
       @Html.LabelFor(m => m.Password): 

       @Html.PasswordFor(m => m.Password) 
       @Html.ValidationMessageFor(m => m.Password) 
      </div> 

      <div class="editor-label"> 
       @Html.LabelFor(m => m.ConfirmPassword): 

       @Html.PasswordFor(m => m.ConfirmPassword) 
       @Html.ValidationMessageFor(m => m.ConfirmPassword) 
      </div> 

      <div class="editor-label"> 
       @Html.LabelFor(m => m.DateOfBirth): 

       @Html.TextBoxFor(m => m.DateOfBirth) 
       @Html.ValidationMessageFor(m => m.DateOfBirth) 
      </div> 

      <p> 
       <input type="submit" value="Iniciar Sesion" /> 
      </p> 
     </div> 
    } 
</div> 

由HTML輔助輸出生成的每個項目：

 <div class="editor-label"> 
      <label for="UserName">Nombre de Usuario</label>: 

      <input data-val="true" data-val-required="The Nombre de Usuario field is required." id="UserName" name="UserName" type="text" value="" /> 
      <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span> 
     </div> 

     <div class="editor-label"> 
      <label for="Password">Contrase&#241;a</label>: 

      <input data-val="true" data-val-length="The Contrase&amp;#241;a must be at least 6 characters long." data-val-length-max="100" data-val-length-min="6" data-val-required="The Contrase&amp;#241;a field is required." id="Password" name="Password" type="password" /> 

      <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span> 
     </div> 

這是它的樣子：

如何對齊這些輸入框以使窗體看起來整潔？

Answer 1

你可以做到這一切的使用CSS的：

.editor-label { 
    clear:both; 
} 

editor-label label { 
    float:left; 
    width:150px 
} 

editor-label input { 
    float:left; 
}