含display:inline-grid的Div与内部<select multiple>控件错位问题求助

问题分析 #

你当前使用inline-grid横向排列三个容器，但当某一个列表为空时，容器高度变化，受inline-grid默认基线对齐规则影响，三个容器出现错位。

解决思路与实现 #

方案1：强制统一垂直对齐 #

给三个容器添加vertical-align: top，强制它们顶部对齐，不受内部内容高度影响：

.dual-list .dual-list-include-container, 
.dual-list .dual-list-actions, 
.dual-list .dual-list-exclude-container {
    display: inline-grid;
    vertical-align: top; /* 新增：强制顶部对齐 */
}

方案2：改用Flex布局（更推荐） #

Flex布局原生适配横向排列场景，能彻底规避这类对齐问题：

1. 修改父容器样式：

.dual-list {
    display: flex;
    gap: 16px; /* 可选：添加容器间间距 */
    align-items: flex-start; /* 顶部对齐，也可设为center居中 */
}

2. 移除子容器的display: inline-grid（Flex子元素无需该属性）：

.dual-list .dual-list-include-container, 
.dual-list .dual-list-actions, 
.dual-list .dual-list-exclude-container {
    /* 移除display: inline-grid */
}

修改后三个容器会自动横向排列，且始终保持统一对齐状态，不受列表内容是否为空影响。

方案3：固定容器高度 #

若需保留inline-grid，可给三个容器设置固定高度，确保高度一致：

.dual-list .dual-list-include-container, 
.dual-list .dual-list-actions, 
.dual-list .dual-list-exclude-container {
    display: inline-grid;
    height: 90px; /* 和select组件高度保持一致 */
    vertical-align: top;
}

内容的提问来源于stack exchange，提问作者Marco Prauchner