使用弹性框在文本字段上方显示表单输入答案

【问题标题】：Form Input displayed above text field using flexbox使用弹性框在文本字段上方显示表单输入
【发布时间】：2020-01-18 13:20:26
【问题描述】：

我正在尝试使用 flexbox 创建一个表单，我希望标签字段位于文本输入字段上方，并连续显示。目前，我的表单连续显示，但我无法让标签字段位于输入之上。任何建议都会很棒。

       <form>
        <div class="form-container">
          <label for="first-name">First Name</label>
          <input type="text" name="first-name">
          <label for="middle-name">Middle Name</label>
          <input type="text" name="middle-name">
          <label for="last-name">Last Name</label>
          <input type="text" name="last-name">
        </div>
      </form>

    .form-container {
      margin: 2rem 0;
      display: flex;
      justify-content: flex-start;
    }

【问题讨论】：

标签： css flexbox

【解决方案1】：

看看这个。

  .form-container {
      margin: 2rem 0;
      display: flex;
      justify-content: flex-start;
    }
.form-group {
  display: flex;
  flex-direction : column;
  margin-right: 40px;
}

  <form>
        <div class="form-container">
          <div class="form-group">
          <label for="first-name">First Name</label>
          <input type="text" name="first-name">  
          </div>
          
          <div class="form-group">
          <label for="middle-name">Middle Name</label>
          <input type="text" name="middle-name">  
          </div>
          
          <div class="form-group">
          <label for="last-name">Last Name</label>
          <input type="text" name="last-name">  
          </div>

        </div>
      </form>

【讨论】：

如果我尝试添加更多字段，例如单选按钮，然后是电子邮件地址，并希望将它们直接放在名称字段下方，是否需要创建一个新的表单组？跨度>
为此，您可以创建新的表单组并将表单组的宽度设置为 25%。然后添加flex-wrap: wrap; 这将允许他们中断并开始新行。我已经创建了一支笔，看codepen.io/bhanusinghR/pen/rNBZQRj
我知道它是如何工作的，但是如果屏幕尺寸很大，它仍然会连续显示所有项目。我要做的是在一行中设置名称字段，然后在其下方有单选按钮，然后在下方有电子邮件。我不希望它们都排成一行，所以它实际上是一个列显示，除了连续的名称文本字段。这听起来可能令人困惑。
这可能更清楚，我希望表单字段的每个部分都在自己的行上。所以名字中间最后下一行单选按钮下一行电子邮件地址
如果我理解正确，那么您需要为不同类型的字段设置不同的行部分。在这种情况下，您应该创建多个表单容器，并且每个容器都应该有这样的文件。我已经更新了codepen，检查：codepen.io/bhanusinghR/pen/rNBZQRj

【解决方案2】：

您可以像这样将每个输入包装在标签中：

.form-container {
  margin: 2rem 0;
  display: flex;
  justify-content: flex-start;
}

.form-container input {
  display: block
}

<form>
  <div class="form-container">
    <label>First Name <input type="text" name="first-name"/></label>
    <label>Middle Name <input type="text" name="middle-name" /></label>
    <label>Last Name <input type="text" name="last-name" /></label>
  </div>
</form>

【讨论】：