html 表单 - 使输入出现在同一行

Question

我正在努力让两个 html 表单输入（名字和姓氏）并排出现在同一行上。我试过使用 float，但这似乎让其余的输入无处不在。任何建议将不胜感激 - 这是我的代码：

HTML:

 <form action="includes/contact.php" method="post">

    <label for="First_Name">First Name:</label>
    <input name="first_name" id="First_Name" type="text" />
    <label for="Name">Last Name:</label>
    <input name="last_name" id="Last_Name" type="text" />

    <label for="Email">Email:</label>
    <input name="email" id="Email" type="email" />

    <label for="Telephone">Telephone:</label>
    <input name="telephone" id="Telephone" type="tel" />

    <label for="Wedding">Wedding Date:</label>
    <input name="wedding" id="Wedding" type="date" />

    <label for="Requirements">Specific Requirements:</label>
    <textarea name="requirements" id="Requirements" maxlength="1000" cols="25" rows="6"> </textarea>

    <input type="submit" value="Submit"/>
</form>

CSS：

 #contactpage form {
  overflow: hidden;
  display: block;
}

#contactpage form label {
  margin-top:12px;
  font-size: 1.15em;
  color: #333333;
  font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.2;
}

#contactpage form input {
  border: 1px solid #DDDDDD;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -khtml-border-radius: 0px;
  -webkit-border-radius: 0px;
}

#contactpage form input[type='text'] {
  width: 22%;
  display: inline!important;
  background: #F9F9F9;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  line-height: 1.4;
  padding: 6px;
}

#contactpage form input[type='email'],
#contactpage form input[type='tel'],
#contactpage form input[type='date'],
#contactpage form textarea {
  width: 94%;
  display: block;
  background: #F9F9F9;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  line-height: 1.4;
  padding: 6px;
}

#contactpage form input[type='submit'] {
  float:right;
  clear:both;
  display: block;
  background: #F9F9F9;
  color: #333333;
  font-size: 1.5em;
  font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  padding: 20px 20px 40px;
}

#contactpage form input[type='submit']:hover {
  color: #FFFFFF;
  background: #f1bdb5;
}

这是 JSBin 演示。

原文由 Pectus Excavatum 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将以下内容包装在一个 DIV 中：

 <div class="your-class">

  <label for="First_Name">First Name:</label>
  <input name="first_name" id="First_Name" type="text" />
  <label for="Name">Last Name:</label>
  <input name="last_name" id="Last_Name" type="text" />

</div>

在您的 CSS 中给出每个输入 float:left ：

 .your-class input{
  float:left;
}

仅举例

您可能需要调整边距。

请记住将 clear:left 或两者应用于 ".your-class" 之后的任何内容

原文由 Aessandro 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将多个表单元素包装在 div 中，使用一个类

display: table

在里面 div ，将每个 label 和 input 包装在 divs 使用的类中

display: table-cell

远离 floats ！

参考

原文由 Mlasell 发布，翻译遵循 CC BY-SA 4.0 许可协议