使表单输入正确浮动答案

【问题标题】：Make form inputs float correctly使表单输入正确浮动
【发布时间】：2019-10-16 06:47:55
【问题描述】：

我有这个表格：

我希望姓氏输入与名字在同一行。我对它们都使用了float-left，但它不起作用。

.first-name {
  float: left;
  margin-right: 20px;
}

.last-name {
  float: left;
}

input,
label {
  display: block;
}

<form action="" method="POST">
  <section>
    <div class="first-name">
      <label for="first-name">First name</label>
      <input type="text" id="first-name" required> </div>
    <div class="last-name">
      <label for="last-name">Last name </label>
      <input type="text" id="last-name" required></div>

    <br style="clear:both;" />
  </section>
  <section>
    <label for="company">Company </label>
    <input type="text" id="company" required>

    <label for="email">E-mail</label>
    <input type="email" id="email" required>
  </section>
  <input class="submit" type="submit" value="REGISTER">
</form>

【问题讨论】：

你必须把表格放在表格标签内。
您需要在 .first-name 和 .last-name 两个 div 中添加 50% 的宽度
@MinalChauhan 我现在做到了，但它不起作用
你能添加完整的代码吗？可能会影响父宽度。
我们在2019年，请不要使用<table>来格式化您的页面。例如，Flexbox 可能是解决问题的好方法。 => css-tricks.com/snippets/css/a-guide-to-flexbox

标签： html css forms input sass

【解决方案1】：

使用 flexbox 来解决这个问题。

section.justify-content-btw {
  display: flex;
  justify-content: space-between;
}

input,
label {
  display: block;
}

<form action="" method="POST">
  <section class="justify-content-btw">
    <div class="first-name">
      <label for="first-name">First name</label>
      <input type="text" id="first-name" required> </div>
    <div class="last-name">
      <label for="last-name">Last name </label>
      <input type="text" id="last-name" required></div>

    <br style="clear:both;" />
  </section>
  <section>
    <label for="company">Company </label>
    <input type="text" id="company" required>

    <label for="email">E-mail</label>
    <input type="email" id="email" required>
  </section>
  <input class="submit" type="submit" value="REGISTER">
</form>

【讨论】：