使用css将标签和文本框放在同一行上

创建新的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>

---

我通常将标签向左浮动，并将输入列在其旁边。下面是一个例子：

下面是我如何重新排列代码的示例：

<div class="editor">
  @Html.LabelFor(m => m.UserName)
  @Html.TextBoxFor(m => m.UserName)
  @Html.ValidationMessageFor(m => m.UserName)
</div>

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

---

虽然我还没有尝试kinakuta接受的答案，但它要求您重新安排VisualStudio生成的视图；如果您不想重新排列自动生成的布局，我将按如下方法进行处理。，即保留格式

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

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

etc...

等

下面的CSS似乎适合我。请随时提供改进。（看起来与Pa0l0的答案非常相似）

.editor标签、.display标签
{
明确：两者皆有；
浮动：左；
宽度：150px；
利润率：1米0；
字体大小：粗体；
}
.editor字段、.display字段
{
利润率：1米0；
最小高度：1.5em；
}

这些答案中有几个不是我想要的。我的CSS中的这一点似乎适合我的需要

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

---

你能告诉我你将如何更改问题中提到的css吗？告诉我你的标记，如果你需要，我可以创建另一个JSFIDLE。我要做的第一件事是将标签移动到与文本输入相同的父元素中。当你浮动你的标签时，它在一个块元素中浮动，这意味着后面的任何东西都会在它下面流动。请参考我答案中的JSFIDLE，了解我的意思。通过在同一个父项中移动标签，可以工作。如何对齐文本框以使表单看起来不凌乱。为标签指定宽度-这会使输入与最左侧保持相同的距离，对齐它们。然后，根据您喜欢标签的排列方式，您可以保持其原样，也可以将其文本对齐。类似地，我在Site.css中没有看到任何显示字段/显示标签元素。我已经使用VS2010创建了一个新项目。

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

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

etc...

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

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