如何使 <label> 和 <input> 出现在 HTML 表单的同一行上？

Question

提问by luchxo

I am creating a registration form for a website. I want each label and its corresponding input element to appear on the same line.

我正在为一个网站创建一个注册表单。我希望每个标签及其相应的输入元素出现在同一行上。

Here's my code:

这是我的代码：

#form {
 background-color: #FFF;
 height: 600px;
 width: 600px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 0px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 padding: 0px;
}

label {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 18px;
 color: #333;
 height: 20px;
 width: 200px;
 margin-top: 10px;
 margin-left: 10px;
 text-align: right;
 clear: both;
}

input {
 height: 20px;
 width: 300px;
 border: 1px solid #000;
 margin-top: 10px;
 float: left;
}

<div id="form">

 <form action="" method="post" name="registration" class="register">
  
  <fieldset>

   <label for="Student"> Name: </label>
   <input name="Student" />
   <label for="Matric_no"> Matric number: </label>
   <input name="Matric_no" />
   <label for="Email"> Email: </label>
   <input name="Email" />
   <label for="Username"> Username: </label>
   <input name="Username" />
   <label for="Password"> Password: </label>
   <input name="Password" type="password" />
   
   <input name="regbutton" type="button" class="button" value="Register" />
  </fieldset>

 </form>
</div>

Answer 1

采纳答案by Josh Crozier

Assuming you want to float the elements, you would also have to float the labelelements too.

假设你想浮动元素，你也必须浮动label元素。

Something like this would work:

像这样的事情会起作用：

label {
    /* Other styling... */
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}

#form {
    background-color: #FFF;
    height: 600px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0px;
    text-align:center;
}
label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
    height: 20px;
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}
input {
    height: 20px;
    width: 300px;
    border: 1px solid #000;
    margin-top: 10px;
    float: left;
}
input[type=button] {
    float:none;
}

<div id="form">
    <form action="" method="post" name="registration" class="register">
        <fieldset>
            <label for="Student">Name:</label>
            <input name="Student" id="Student" />
            <label for="Matric_no">Matric number:</label>
            <input name="Matric_no" id="Matric_no" />
            <label for="Email">Email:</label>
            <input name="Email" id="Email" />
            <label for="Username">Username:</label>
            <input name="Username" id="Username" />
            <label for="Password">Password:</label>
            <input name="Password" id="Password" type="password" />
            <input name="regbutton" type="button" class="button" value="Register" />
        </fieldset>
    </form>
</div>

Alternatively, a more common approach would be to wrap the input/labelelements in groups:

或者，更常见的方法是将input/label元素包装在组中：

<div class="form-group">
    <label for="Student">Name:</label>
    <input name="Student" id="Student" />
</div>

#form {
    background-color: #FFF;
    height: 600px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0px;
    text-align:center;
}
label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
    height: 20px;
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: right;
    margin-right:15px;
    float:left;
}
input {
    height: 20px;
    width: 300px;
    border: 1px solid #000;
    margin-top: 10px;
}

<div id="form">
    <form action="" method="post" name="registration" class="register">
        <fieldset>
            <div class="form-group">
                <label for="Student">Name:</label>
                <input name="Student" id="Student" />
            </div>
            <div class="form-group">
                <label for="Matric_no">Matric number:</label>
                <input name="Matric_no" id="Matric_no" />
            </div>
            <div class="form-group">
                <label for="Email">Email:</label>
                <input name="Email" id="Email" />
            </div>
            <div class="form-group">
                <label for="Username">Username:</label>
                <input name="Username" id="Username" />
            </div>
            <div class="form-group">
                <label for="Password">Password:</label>
                <input name="Password" id="Password" type="password" />
            </div>
            <input name="regbutton" type="button" class="button" value="Register" />
        </fieldset>
    </form>
</div>

Note that the forattributeshould correspond to the idof a labelable element, not its name. This will allow users to click the labelto give focus to the corresponding form element.

请注意，该for属性应对应于可标记id元素的，而不是其name。这将允许用户单击label以将焦点放在相应的表单元素上。

Answer 2

回答by facebook-100006652272506

I found "display:flex"style is a good way to make these elements in same line. No matter what kind of element in the div. Especially if the input class is form-control,other solutions like bootstrap, inline-block will not work well.

我发现"display:flex"style 是将这些元素放在同一条线上的好方法。不管 div 中是什么元素。特别是如果输入类是表单控件，其他解决方案如 bootstrap、inline-block 将无法正常工作。

Example:

例子：

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
    <label for="Student">Name:</label>
    <input name="Student" />
</div>

More detail about display:flex:

有关 display:flex 的更多详细信息：

flex-direction: row, column

弹性方向：行，列

justify-content: flex-end, center, space-between, space-around

align-items: stretch, flex-start, flex-end, center

对齐项目：拉伸、弹性开始、弹性结束、居中

Answer 3

回答by sheriffderek

aaa##HTML I would suggest you wrap them in a div, since you will likely end up floating them in certain contexts.

aaa##HTML 我建议您将它们包装在一个 div 中，因为您最终可能会在某些上下文中浮动它们。

<div class="input-w">
    <label for="your-input">Your label</label>
    <input type="text" id="your-input" />
</div>

CSS

Then within that div, you can make each piece inline-blockso that you can use vertical-alignto center them - or set baseline etc. (your labels and input might change sizes in the future...

然后在那个 div 中，您可以制作每个部分，inline-block以便您可以用来vertical-align将它们居中 - 或设置基线等（您的标签和输入将来可能会改变大小......

.input-w label, .input-w input {
    float: none; /* if you had floats before? otherwise inline-block will behave differently */
    display: inline-block;
    vertical-align: middle;    
}

jsFiddle

js小提琴

UPDATE: mid 2016 + with mobile-first media queries and flex-box

更新：2016 年年中 + 移动优先媒体查询和 flex-box

This is how I do things these days.

这就是我这些天做事的方式。

HTML

<label class='input-w' for='this-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-input-name' placeholder='hello'>
</label>

<label class='input-w' for='this-other-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-other-input-name' placeholder='again'>
</label>

SCSS

社会保障局

html { // https://www.paulirish.com/2012/box-sizing-border-box-ftw/
  box-sizing: border-box;
  *, *:before, *:after {
    box-sizing: inherit;
  }
} // if you don't already reset your box-model, read about it

.input-w {
  display: block;
  width: 100%; // should be contained by a form or something
  margin-bottom: 1rem;
  @media (min-width: 500px) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .label, .input {
    display: block;
    width: 100%;
    border: 1px solid rgba(0,0,0,.1);
    @media (min-width: 500px) {
      width: auto;
      display: flex;
    }
  }
  .label {
    font-size: 13px;
    @media (min-width: 500px) {
      /* margin-right: 1rem; */
      min-width: 100px; // maybe to match many?
    }
  }
  .input {
    padding: .5rem;
    font-size: 16px;
    @media (min-width: 500px) {
      flex-grow: 1;
      max-width: 450px; // arbitrary
    }
  }
}

jsFiddle

js小提琴

Answer 4

回答by Provision

What you were missing was the float: left; here is an example just done in the HTML

你缺少的是 float: left; 这是一个刚刚在 HTML 中完成的示例

<div id="form">
<form action="" method="post" name="registration" class="register">
    <fieldset>
        <label for="Student" style="float: left">Name:</label>
        <input name="Student" />
        <label for="Matric_no" style="float: left">Matric number:</label>
        <input name="Matric_no" />
        <label for="Email" style="float: left">Email:</label>
        <input name="Email" />
        <label for="Username" style="float: left">Username:</label>
        <input name="Username" />
        <label for="Password" style="float: left">Password:</label>
        <input name="Password" type="password" />
        <input name="regbutton" type="button" class="button" value="Register" />
    </fieldset>
</form>

The more efficient way to do this is to add a class to the labels and set the float: left; to the class in CSS

更有效的方法是向标签添加一个类并设置 float: left; 到 CSS 中的类

Answer 5

回答by Padawan

Aside from using floats, as others have suggested, you can also rely on a framework such as Bootstrapwhere you can use the "horizontal-form" class to have the label and input on the same line.

除了使用浮点数之外，正如其他人所建议的那样，您还可以依赖诸如Bootstrap 之类的框架，您可以在其中使用“horizontal-form”类将标签和输入放在同一行上。

If you're unfamiliar with Bootstrap, you would need to include:

如果您不熟悉 Bootstrap，则需要包括：

the link to the Bootstrap CSS(the top link where it says < -- Latest compiled and minified CSS -- >), in the head, as well as add some divs:
div class="form-group"
div class="col-..."
along with class="col-sm-2 control-label"in each label, as Bootstrap shows, which I included below.
I also reformatted your button so it's Bootstrap compliant.
and added a legend, to your form box, since you were using a fieldset.

链接到引导CSS （顶部链接的地方说< -最新编译和精缩CSS - >） ，在头部，以及添加一些div：
div 类 =“表单组”
div 类 =“col-...”
以及每个标签中的class="col-sm-2 control-label"，如 Bootstrap 所示，我在下面包含了它。
我还重新格式化了您的按钮，使其与 Bootstrap 兼容。
并在您的表单框中添加了一个图例，因为您使用的是字段集。

It's very straight forward and you wouldn't have to mess with floats or a ton of CSS for formatting, as you listed above.

它非常简单，您不必像上面列出的那样，使用浮点数或大量 CSS 进行格式化。

  <div id="form">
    <div class="row">
      <form action="" method="post" name="registration" class="register form-horizontal">
        <fieldset>
        <legend>Address Form</legend>

      <div class="form-group">
        <label for="Student" class="col-sm-2 control-label">Name:</label>
          <div class="col-sm-6">
            <input name="Student" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Matric_no" class="col-sm-2 control-label">Matric number: </label>
          <div class="col-sm-6">
            <input name="Matric_no" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Email" class="col-sm-2 control-label">Email: </label>
          <div class="col-sm-6">
            <input name="Email" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Username" class="col-sm-2 control-label">Username: </label>
          <div class="col-sm-6">
            <input name="Username" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Password" class="col-sm-2 control-label">Password: </label>
          <div class="col-sm-6">
            <input name="Password" type="password" class="form-control">
          </div>
      </div>

      <div>
        <button class="btn btn-info" name="regbutton" value="Register">Submit</button>
      </div>

      </fieldset>
    </form>
    </div>
  </div>
</div>

Answer 6

回答by Grigory Kislin

For Bootstrap 4 it could be done with class="form-group" style="display: flex"

对于 Bootstrap 4，它可以用 class="form-group" style="display: flex"

<div class="form-group" style="display: flex">
    <label>Topjava comment:</label>
    <input class="form-control" type="checkbox"/>
</div>

Answer 7

回答by Tom Berthold

I've done this several different ways but the only way I've found that keeps the labels and corresponding text/input data on the same line and always wraps perfectly to the width of the parent is to use display:inline table.

我已经完成了几种不同的方法，但我发现将标签和相应的文本/输入数据保持在同一行并始终完美地包装到父级宽度的唯一方法是使用 display:inline table。

CSS

.container {
  display: inline-table;
  padding-right: 14px;
  margin-top:5px;
  margin-bottom:5px;
}
.fieldName {
  display: table-cell;
  vertical-align: middle;
  padding-right: 4px;
}
.data {
  display: table-cell;
}

HTML

<div class='container'>
    <div class='fieldName'>
        <label>Student</label>
    </div>
    <div class='data'>
        <input name="Student" />
    </div>
</div>
<div class='container'>
    <div class='fieldName'>
        <label>Email</label>
    </div>
    <div class='data'>
      <input name="Email" />
    </div>
</div>

Answer 8

回答by Jay Wright

Wrap the label and the input within a bootstraps div

将标签和输入包裹在引导 div 中

<div class ="row">
  <div class="col-md-4">Name:</div>
  <div class="col-md-8"><input type="text"></div>
</div>

Answer 9

回答by user7119463

#form {
    background-color: #FFF;
    height: 600px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0px;
    text-align:center;
}
label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
    height: 20px;
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: right;
    margin-right:15px;
    float:left;
}
input {
    height: 20px;
    width: 300px;
    border: 1px solid #000;
    margin-top: 10px;
}

<div id="form">
    <form action="" method="post" name="registration" class="register">
        <fieldset>
            <div class="form-group">
                <label for="Student">Name:</label>
                <input name="Student" />
            </div>
            <div class="form-group">
                <label for="Matric_no">Matric number:</label>
                <input name="Matric_no" />
            </div>
            <div class="form-group">
                <label for="Email">Email:</label>
                <input name="Email" />
            </div>
            <div class="form-group">
                <label for="Username">Username:</label>
                <input name="Username" />
            </div>
            <div class="form-group">
                <label for="Password">Password:</label>
                <input name="Password" type="password" />
            </div>
            <input name="regbutton" type="button" class="button" value="Register" />
        </fieldset>
    </form>
</div>

Answer 10

回答by W Kenny

I am using Angular 6 with Bootstrap 4 and find this way works:

我在 Bootstrap 4 中使用 Angular 6 并发现这种方式有效：

<div class="form-group row">
    <div class="col-md-2">
        <label for="currentPassword">Current Password:</label>
    </div>
    <div class="col-md-6">
        <input type="password" id="currentPassword">
    </div>
</div>

如何使 <label> 和 <input> 出现在 HTML 表单的同一行上？

提问by luchxo

采纳答案by Josh Crozier

回答by facebook-100006652272506

回答by sheriffderek

CSS

CSS

UPDATE: mid 2016 + with mobile-first media queries and flex-box

更新：2016 年年中 + 移动优先媒体查询和 flex-box

HTML

HTML

SCSS

社会保障局

回答by Provision

回答by Padawan

回答by Grigory Kislin

回答by Tom Berthold

回答by Jay Wright

回答by user7119463

回答by W Kenny

相关推荐

最近更新

标签

如何使 <label> 和 <input> 出现在 HTML 表单的同一行上？

提问by luchxo

采纳答案by Josh Crozier

回答by facebook-100006652272506

回答by sheriffderek

CSS

CSS

UPDATE: mid 2016 + with mobile-first media queries and flex-box

更新：2016 年年中 + 移动优先媒体查询和 flex-box

HTML

HTML

SCSS

社会保障局

回答by Provision

回答by Padawan

回答by Grigory Kislin

回答by Tom Berthold

回答by Jay Wright

回答by user7119463

回答by W Kenny

相关推荐

Html 我们可以在每个 <tr> 上方的 table 中添加 div 吗？

Html 在链接之间放置空格

Html 如何使用 Bootstrap 3 阻止按钮保持按下状态

Html html5 websockets 会被防火墙削弱吗？

相关推荐

最近更新

标签