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

Posted

技术标签:

【中文标题】如何使 <label> 和 <input> 出现在 HTML 表单的同一行？【英文标题】：How to make <label> and <input> appear on the same line on an HTML form? 【发布时间】：2014-06-25 03:42:14 【问题描述】：

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

这是我的代码：

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

【问题讨论】：

我最喜欢这个答案没有被否决，因为你说你不想尝试错误；） 【参考方案1】：

假设您想要浮动元素，您还必须浮动 label 元素。

这样的事情会起作用：

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>

另外，更常见的方法是将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>

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

【讨论】：

谢谢！这正是我想要实现的。这两种方法对我都很有效。我有 1 个问题，在 css 中，为什么我要将表单 div 的文本对齐到中心然后右对齐标签？如果我不将表单 div 居中对齐，会不会弄乱我的代码？ 很好的答案，尤其是提到clear: both; 对我的案子有帮助。【参考方案2】：

你缺少的是 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>

更有效的方法是为标签添加一个类并设置浮动：左；到 CSS 中的类

【讨论】：

【参考方案3】：

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

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

CSS

然后在该 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

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

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

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

【讨论】：

我是否必须将每个标签及其对应元素包装在不同的 div 中？或者我只是在这个 div 中包含所有标签 我现在在 &lt;label&gt; 元素中为“标签”和输入包装了一个跨度。【参考方案4】：

另一种选择是在表单内放置一个表格。 （见下文）我知道有些人不喜欢表格，但我认为它们在响应式表单布局方面工作得很好。

<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<TABLE BORDER="1">
  <TR>
    <TD>Your name</TD>
    <TD>
      <INPUT TYPE="TEXT" NAME="name" SIZE="20">
    </TD>
  </TR>
  <TR>
    <TD>Your E-mail address</TD>
    <TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD>
  </TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"></P>
</FORM>

【讨论】：

表格不应该用于布局。 1) 全部大写都伤害了我。 2）表格，正如@Gothdo所说，不应该在布局中使用，它应该只在表格数据中使用goo.gl/V9dRtp【参考方案5】：

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

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

Bootstrap CSS 的链接（上面的链接写着 ），在头部，以及添加一些 div：李> div class="form-group" div class="col-..." 以及每个标签中的 class="col-sm-2 control-label"，如 Bootstrap 所示，我将其包括在下面。 我还重新格式化了您的按钮，使其与 Bootstrap 兼容。 并在表单框中添加了一个图例，因为您使用的是字段集。

它非常简单，您不必像上面列出的那样为格式化而使用浮点数或大量 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>

【讨论】：

【参考方案6】：

我已经完成了几种不同的方法，但我发现将标签和相应的文本/输入数据保持在同一行并始终完美地包裹到父级宽度的唯一方法是使用 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>

【讨论】：

在以上所有答案中，使用 display:inline-table 你建议对我有用，而不必将我的标签和输入框包装在一个 div 中。【参考方案7】： 

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

【讨论】：

【参考方案8】：

我发现"display:flex" 样式是将这些元素放在同一行中的好方法。不管 div 中有什么样的元素。尤其是输入类是form-control的时候，bootstrap、inline-block等其他解决方案就不好用了。

例子：

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

关于 display:flex: 的更多细节：

弹性方向：行、列

justify-content：flex-end、center、space-between、space-around

对齐项目：拉伸、flex-start、flex-end、center

【讨论】：

不知道 flex 的存在【参考方案9】：

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

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

【讨论】：

【参考方案10】：

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

【讨论】：

【参考方案11】：

我将 Angular 6 与 Bootstrap 4 一起使用，发现这种方式可行：

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

【讨论】：

简单有效。【参考方案12】：

这东西很好用。它把带有标签的单选按钮或复选框放在同一行，没有任何 CSS。 <label><input type="radio" value="new" name="filter">NEW</label> <label><input type="radio" value="wow" name="filter">WOW</label>

【讨论】：

以上是关于如何使 <label> 和 <input> 出现在 HTML 表单的同一行？的主要内容，如果未能解决你的问题，请参考以下文章

如何使我的单选按钮成为必需的[重复]

如何使标签数组公开

左菜单和右内容

如何使单选按钮返回布尔值真/假而不是开/关

C# 用FOR循环控制Label控件方法~！

如何使每个表单标签独一无二