如何沿同一垂直线对齐多个标记的内联块输入控件？ [关闭]

Posted 2023-03-06

【中文标题】如何沿同一垂直线对齐多个标记的内联块输入控件？ [关闭]

【英文标题】：How to align multiple labeled inline block input controls along the same vertical line? [closed]

【发布时间】：2019-04-25 03:08:58

【问题描述】：

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

如您所见，目前每个标签的不同高度会导致下拉菜单垂直显示在不同的点：

【问题讨论】：

出示你的代码，我会给出答案

请显示呈现的 html 而不是任何内容

“输入框”是指标签吗？图片中的select已经都是一样的高度了。

抱歉，我指的是下拉框。我希望它们对齐而不是标签

如果元素不都在同一个父元素中，这对于 CSS 是不可能的。你需要JS。 没有 CSS 方法可以均衡不共享父元素的元素的高度。

【参考方案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;

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

div > label 
    max-width: 10em;

不要忘记将每个 label 元素与其各自的控件相关联（使用 label 的 for 属性）。