当创建一个新的asp.net mvc3应用程序时，您将获得登录和注册表单，并在文本字段上方添加标签。
我想改变它，以便标签和字段都在同一行上并对齐
我想改变它，以便标签和字段都在同一行上并对齐
以下不行
@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;
}
解决方法
我通常将我的标签向左移动，并将输入行放在旁边。这里有一个例子：
http://jsfiddle.net/qXFLa/
以下是我如何重新排列代码的示例：
<div class="editor"> @Html.LabelFor(m => m.UserName) @Html.TextBoxFor(m => m.UserName) @Html.ValidationMessageFor(m => m.UserName) </div>
那么，对于你的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
}
