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

检查一下。

null

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

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

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

2 个答案: