在创建新的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;
}
发布于 2011-06-22 17:24:42
我通常将标签放在左边,输入线放在标签旁边。下面是一个例子: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
}
发布于 2012-03-21 16:39:04
我正在使用这个css
.editor-label
{ display: block;
float: left;
padding: 0;
width: 150px;
margin: 1em 1em 0 0;
}
.editor-field
{
width:auto;
margin: 0.5em 0 0 0;
overflow: auto;
min-height: 2em;
}
发布于 2015-10-07 04:42:21
其中一些答案并不完全是我想要的。我的CSS中的这一点似乎可以满足我的需要。
input,
select,
textarea{
display:inline-block !important;
}
https://stackoverflow.com/questions/6437621
复制相似问题