CSS 使用css在同一行上的标签和文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6437621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Label and text box on the same line using css
提问by user9969
When creating a new asp.net mvc3 app you get the logon and register form with a label above the text field. I want to change it so that both the label and field are on the same line and aligned
创建新的 asp.net mvc3 应用程序时，您将获得带有文本字段上方标签的登录和注册表单。我想更改它，以便标签和字段都在同一行上并对齐
The following doesn't work
以下不起作用
@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:
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;
}
采纳答案by kinakuta
I typically float my label left and the input lines up next to it. Here's an example: http://jsfiddle.net/qXFLa/
我通常将我的标签向左浮动，输入线在它旁边。这是一个例子：http: //jsfiddle.net/qXFLa/
Here's an example of how I'd rearrange your code:
这是我如何重新排列代码的示例：
<div class="editor">
@Html.LabelFor(m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
</div>
Then, for your css:
然后，对于您的 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
}
回答by Pa0l0
I'm using this css
我正在使用这个 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;
}
回答by joedotnot
Although i have not tried the accepted answer by kinakuta, it requires you to re-arrange the Visual Studio generated view; I would approach as follows, if you don't want to re-arrange the autogenerated layout., i.e. to keep the format
虽然我还没有尝试过 kinakuta 接受的答案，但它需要您重新排列 Visual Studio 生成的视图；如果您不想重新排列自动生成的布局，我会按如下方式处理。, 即保持格式
<div class="editor-label" />
<div class="editor-field" />
<div class="editor-label" />
<div class="editor-field" />
etc...
The following CSS appears to work for me. Feel free to offer improvements. (it looks very similar to the answer by Pa0l0)
以下 CSS 似乎对我有用。随意提供改进。（它看起来与Pa0l0的答案非常相似）
<style type="text/css">
.editor-label, .display-label
{
clear:both;
float:left;
width:150px;
margin:1em 0 0 0;
font-weight:bold;
}
.editor-field, .display-field
{
margin:1em 0 0 0;
min-height:1.5em;
}
</style>
回答by Tyriddik
A few of these answers wasn't quite what I was looking for. This bit in my CSS seems to work for my needs.
其中一些答案并不是我想要的。我的 CSS 中的这一点似乎适合我的需要。
input,
select,
textarea{
display:inline-block !important;
}
