c# - 如何对齐由 MVC3 Html Helper 方法生成的表单？

Question

这是我正在谈论的 View 的代码:

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