How can I align a form that has been generated by MVC3 Html Helper methods?
Here is the code for the View I'm talking about:
@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>
Each item being generated by the HTML helpers outputs to:
<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ña</label>:
<input data-val="true" data-val-length="The Contrase&#241;a must be at least 6 characters long." data-val-length-max="100" data-val-length-min="6" data-val-required="The Contrase&#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>
This is how it looks like:
How can I align these input boxes to make the form look neater?
You can do all of this using CSS:
.editor-label {
clear:both;
}
editor-label label {
float:left;
width:150px
}
editor-label input {
float:left;
}
精彩评论