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

当创建一个新的asp.net mvc3应用程序时，您将在文本字段上方获得带有标签的登录和注册表单。我想改变它，这样无论是标签和字段都在同一条线上，并对准使用css在同一行上的标签和文本框

下不起作用

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

我通常我的浮动标签左边，输入线旁边。这里有一个例子：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 
}

来源

2011-06-22 09:24:42 kinakuta

只是想左浮动，并没有work.can你告诉我，你将如何改变的问题 – user9969

提到的CSS告诉我你的标记，如果你需要我 – kinakuta

编辑了问题，我可以创建另一个的jsfiddle和你可以看到这一切 – user9969

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

来源

2012-03-21 08:39:04 Pa0l0

在类似的说明中，我没有在Site.css中看到任何display-field/display-label元素。我已经使用VS2010创建了一个新项目。 – Rohit

虽然我没有尝试过kinakuta的接受答案，但它需要你重新安排Visual St音频生成视图;如果您不想重新安排自动生成的布局，我会采用如下方法：。，即保持格式

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

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

etc...

下面的CSS似乎适用于我。随意提供改进。（它看起来与Pa010的答案非常相似）

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

来源

2014-04-25 02:33:01 joedotnot

其中一些答案与我所寻找的不太一样。这在我的CSS似乎符合我的需求。

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

来源

2015-10-06 20:42:21 Tyriddik

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

回答

相关问题