html - 如何在 html/css 中创建包含两个文本框和标签的多行？

Question

我想创建三行。在每一行中，我都希望有两个文本框，上面有标签。现在，我有这个 html 代码:

.firstRow, .secondRow, .thirdRow {
      display: inline-block;
}

label, .textBox {
      display: block;
}

<div class="firstRow">
      <label for="name1">Name1</label>
      <input class="textBox" formControlName="name1" />
      <label for="name2">Name2</label>
      <input class="textBox" formControlName="name2" />
</div>
<div class="secondRow">
      <label for="name3">Name3</label>
      <input class="textBox" formControlName="name3" />
      <label for="name4">Name4</label>
      <input class="textBox" formControlName="name4" />
</div>
<div class="thirdRow">
      <label for="name5">Name5</label>
      <input class="textBox" formControlName="name5" />
      <label for="name6">Name6</label>
      <input class="textBox" formControlName="name6" />
</div>

结果在这个链接中: https://jsfiddle.net/Lcav5xje/

我应该改变什么？

Answer 1

这是使用简单 display:flex;

的片段

也不需要为每一行添加单独的类

.row {
  display: flex;
}

.form-grp {
  margin: 10px
}
.form-grp label {
  display:block;
}

<div class="row">
  <div class="form-grp">
    <label for="name1">Name1</label>
    <input class="textBox" formControlName="name1" />
  </div>
  <div class="form-grp">
    <label for="name2">Name2</label>
    <input class="textBox" formControlName="name2" />
  </div>
</div>
<div class="row">
  <div class="form-grp">
    <label for="name3">Name3</label>
    <input class="textBox" formControlName="name3" />
  </div>
  <div class="form-grp">
    <label for="name4">Name4</label>
    <input class="textBox" formControlName="name4" />
  </div>
</div>
<div class="row">
  <div class="form-grp">
    <label for="name5">Name5</label>
    <input class="textBox" formControlName="name5" />
  </div>
  <div class="form-grp">
    <label for="name6">Name6</label>
    <input class="textBox" formControlName="name6" />
  </div>
</div>