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

93

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

这是我的代码：

#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>
展开摘要

html  css  forms 
— 卢克索
source
我最喜欢这个答案不会被拒绝，因为您说过您不想尝试并出错;）
— Anna Klein

Answers:

72

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

这样的事情会起作用：

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

显示代码段

另外，更常见的方法是将input/label元素分组包装：

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

显示代码段

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

— 乔什·克罗泽（Josh Crozier）
source
1
谢谢！这正是我想要实现的目标。两种方法都对我有效。我在CSS中有1个问题，为什么我将div表格的文本对齐到居中，然后右对齐标签？如果我不居中对齐div表格，它会弄乱我的代码吗？
— luchxo 2014年
好的答案，特别是提到clear: both;它对我的情况有帮助。
— Sirar Salih
32

我发现"display:flex"样式是使这些元素排成一行的好方法。无论div中的哪种元素。特别是如果输入类是表单控件，则其他解决方案（如引导程序，内联块）将无法正常工作。

例：

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

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

flex-direction：行，列

证明内容：弹性端，中心，中间间距，周围间距

对齐项目：拉伸，伸缩开始，伸缩结束，居中

— facebook-100006652272506
source
不知道flex的存在
— Espoir Murhabazi
18

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

— 警长
source
我是否必须将每个标签及其对应的元素包装在不同的div中？或者我只是将所有标签都包含在这一分区中
— luchxo 2014年
我将'label'和一个输入的跨度包装起来-<label>现在在元素中是天。
— sheriffderek，2015年
5

你所缺少的是浮子：左；这是一个在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>

更有效的方法是在标签上添加一个类并设置float：left;。到CSS中的类

— 规定
source
4

正如其他人所建议的那样，除了使用浮点数之外，还可以依赖于Bootstrap之类的框架，在该框架中可以使用“水平形式”类在同一行上添加标签和输入。

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

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

这非常简单，您不必像上面列出的那样弄乱了float或大量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>

— 帕达万
source
3

对于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>
— 格里高里·基斯林
source
3

我在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>
— 肯尼
source
1
简单有效。
— 卡拉姆
2

我采用了几种不同的方法，但是我发现将标签和相应的文本/输入数据保持在同一行上并始终完美环绕父级宽度的唯一方法是使用display：inline表。

的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>
— 汤姆·伯特霍尔德
source
在上述所有答案中，使用您建议的display：inline-table对我有用，而不必将我的标签和输入框包装在div中。
— coder101
2

将标签和输入内容包装在bootstrap div中 

<div class ="row">
  <div class="col-md-4">Name:</div>
  <div class="col-md-8"><input type="text"></div>
</div>
— 杰伊·赖特
source
2

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

— 卡兰·戈亚尔（Karan Goyal）
source
1

显示代码段

— 用户名
source
-2

另一种选择是在表格中放置表格。（请参阅下文）我知道有些人不喜欢表格，但是我认为它们在响应式表单布局方面表现很好。

<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>
— 检查伴侣711
source
2
表格不应用于布局。
— 米哈尔Perłakowski
2
1）所有帽子都伤了我。2）表格，如@Gothdo所说，不应在布局中使用，而应仅在表格数据goo.gl/V9dRtp中使用
— Padawan
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.