如何沿同一垂直线对齐多个带标签的嵌入式块输入控件？

Question

我有4个带标签的下拉控件，它们沿着内联文档轴彼此连续。我该如何设置它们的样式，使控制盒本身沿同一垂直线对齐？

如您所见，当前每个标签高度的变化都会导致下拉列表垂直出现在不同的位置：

Answer 1

使用网格布局应该不会太困难：

<div>
    <label>Field 1....</label>
    <select></select>
    <label>Long Field Field Field Field Field</label>
    <select></select>
    <label>Field 2</label>
    <select></select>
    <label>Long Field Field Field Field Field</label>
    <select></select>
</div>

将容器设置为Grid容器：

div {
    display: grid;
}

并确保标签仅位于第一行：

div > label {
    grid-row: 1;
}

由于网格容器是div，因此它在水平方向上占据了所有可用空间，并且标签文本可能永远不会换行。由于您担心输入控件的垂直对齐，即使标签的高度不同，也会发生这种情况，因此您可以使用以下方法进行限制宽度的测试：

div > label {
    max-width: 10em;
}

请不要忘记将您的label元素与各自的控件相关联（使用for的{​​{1}}属性）。

Answer 2

尝试一下

HTML

<div class="container">
  <div class="row">
    <div class="col-md-3 col-sm-3">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      </div>
    </div>
    <div class="col-md-3 col-sm-3">
      <div class="form-group">
        <label for="exampleInputEmail1">Email addressaaaaaaaaaaaaaaaaaaaa</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      </div>
    </div>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
.form-group{
  height: 100%;
  display:flex;
  flex-wrap: wrap;
}
.form-control{
  align-self : flex-end;
}