使用css在同一行上放置标签和文本框
使用css在同一行上放置标签和文本框
提问于 2011-06-22 17:20:47
在创建新的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;
}回答 3
Stack Overflow用户
回答已采纳
发布于 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
}Stack Overflow用户
发布于 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;
}Stack Overflow用户
发布于 2015-10-07 04:42:21
其中一些答案并不完全是我想要的。我的CSS中的这一点似乎可以满足我的需要。
input,
select,
textarea{
display:inline-block !important;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6437621
复制相关文章
相似问题