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

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;
    }

标签： cssflexbox

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>