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

我有4个带标签的下拉控件，它们沿着内联文档轴依次排列。如何设置它们的样式，使控制框本身沿同一垂直线对齐

如您所见，当前每个标签的不同高度导致下拉列表显示在不同的垂直点：

---

对于网格布局，这应该不会太难：

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

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

div > label {
    grid-row: 1;
}

由于网格容器是一个

div

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

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

---

不要忘记将

标签

元素与其各自的控件关联起来（使用

标签

的

for

属性）。

显示您的代码，我会提供答案请显示呈现的html，而不是“输入框”所指的标签？图片中的选项高度已经相同。对不起，我指的是下拉框。我希望它们是对齐的，而不是标签如果元素不都在同一个父元素中，这在CSS中是不可能的。你需要JS。没有CSS方法来均衡不共享父元素的元素的高度。

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