css - 使用 flexbox 在文本字段上方显示表单输入

Question

我正在尝试使用 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;
    }

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