使用css在同一行上的标签和文本框答案

【问题标题】：Label and text box on the same line using css使用css在同一行上的标签和文本框
【发布时间】：2011-09-20 05:24:35
【问题描述】：

当创建一个新的 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;
}

【问题讨论】：

标签： css asp.net-mvc

【解决方案1】：

我通常将我的标签向左浮动，输入在它旁边排成一行。这是一个例子：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
}

【讨论】：

只是试图向左浮动并没有工作。你能告诉我你将如何改变问题中提到的css
显示你的标记，如果你需要，我可以创建另一个 jsfiddle
我要做的第一件事是将标签移动到与文本输入相同的父元素中。浮动标签时发生的情况是它浮动在块元素内，这意味着后面的任何东西都会在它下面流动。请参阅我的答案中的 jsfiddle 以了解我的意思。
通过在同一个父作品中移动标签。如何对齐文本框使表单看起来不凌乱。
给标签一个宽度 - 这将输入与最左边的距离相同，对齐它们。然后，根据您喜欢的标签排列方式，您可以保持原样，也可以将它们文本对齐。

【解决方案2】：

我正在使用这个 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;
}

【讨论】：

在类似的注释中，我在 Site.css 中没有看到任何显示字段/显示标签元素。我使用 VS2010 创建了一个新项目。

【解决方案3】：

虽然我没有尝试过 kinakuta 接受的答案，但它需要您重新排列 Visual Studio 生成的视图； 如果您不想重新排列自动生成的布局。，即保持格式

，我将采用以下方法

<div class="editor-label" />
<div class="editor-field" />

<div class="editor-label" />
<div class="editor-field" />

etc...

以下 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>

【讨论】：

【解决方案4】：

其中一些答案并不是我想要的。我的 CSS 中的这一点似乎可以满足我的需要。

input,
select,
textarea{
    display:inline-block !important;
}

【讨论】：