标签和文本框上使用相同的CSS行 [英] Label and text box on the same line using css

问题描述

新的网页和css.When推出一个asp.net MVC3应用你的登录和注册表格等等......上面的文本字段标签。
我想改变它使两个标签和字段都在同一行上并对准

为什么以下不工作：

  @using（Html.BeginForm（））{
＆LT; D​​IV＆GT;
    ＆LT;＆字段集GT;
        ＆LT;传奇＆gt;帐户信息与LT; /传说＆GT;        ＆LT; D​​IV CLASS =编辑标记＆GT;
            @ Html.LabelFor（M = GT; m.UserName）
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =主编场＆GT;
            @ Html.TextBoxFor（M = GT; m.UserName）
            @ Html.ValidationMessageFor（M = GT; m.UserName）
        ＆LT; / DIV＆GT;        ＆LT; D​​IV CLASS =编辑标记＆GT;
            @ Html.LabelFor（M = GT; m.Password）
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =主编场＆GT;
            @ Html.PasswordFor（M = GT; m.Password）
            @ Html.ValidationMessageFor（M = GT; m.Password）
        ＆LT; / DIV＆GT;        ＆LT; D​​IV CLASS =编辑标记＆GT;
            @ Html.CheckBoxFor（M = GT; m.RememberMe）
            @ Html.LabelFor（M = GT; m.RememberMe）
        ＆LT; / DIV＆GT;        ＆所述p为H.;
            ＆LT;输入类型=提交值=登录/＆GT;
        ＆所述; / P＆GT;
    ＆LT; /字段集＆GT;
＆LT; / DIV＆GT;
 

它们被映射到该CSS的

 。显示标签，
。编辑标签
{
      显示：inline-block的;
      宽度：200像素;
      文本对齐：权利;
      保证金权：10px的;}。显示场，
。编辑场
{
    显示：inline-block的;
     保证金：0.5em 0 0 0;
}
 

解决方案

我通常我的浮动标签左边和它旁边的输入线了。这里有一个例子： http://jsfiddle.net/qXFLa/

下面是如何我重新安排你的code的例子：

 ＆LT; D​​IV CLASS =编辑器＆GT;
  @ Html.LabelFor（M = GT; m.UserName）
  @ Html.TextBoxFor（M = GT; m.UserName）
  @ Html.ValidationMessageFor（M = GT; m.UserName）
＆LT; / DIV＆GT;
 

然后，你的CSS：

 。编辑标签{
  浮动：左;
  宽度：30PX; //只是把一个例子在这里 - 但给他们一个宽度对齐更好
  文本对齐：权利; //这个右对齐它们与输入
}。编辑输入[类型=文本] {
  宽度：80px; //只是把一个例子值在这里使您的长度均匀投入
  保证金：0 0 0 10px的; //刚刚从唱片公司一些喘息空间
}
 

New to web and css.When launching an asp.net mvc3 app you get the logon and register form etc... with label above the text field. I want to change it so that both label and field are on the same line and aligned

Why is the following not working:

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

they are mapped to this 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;
}

解决方案

I typically float my label left and the input lines up next to it. Here's an example: 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:

.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行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！