<div>带显示：内联网格和<select multiple>内部控件未对齐[重复]

Question

我正在尝试创建一个双重列表来包含/排除项目，但我遇到了一个无法识别的问题。

我有 3 个 div，它们必须彼此相邻显示：第一个包含“包含”列表，第二个包含将项目从一个列表移动到另一个列表的操作，第三个包含“排除”列表.

.dual-list .dual-list-include-container, 
.dual-list .dual-list-actions, 
.dual-list .dual-list-exclude-container {
    display: inline-grid;
}

<div class="dual-list">
  <div class="dual-list-include-container">
    <select size="6" multiple="" class="dual-list-ctl dual-list-include" style="width:200px !important;height:90px !important;" ondblclick="...">
    </select>
  </div>
  <div class="dual-list-actions">
    <div>
      <a href="...">Exclude all</a>
    </div>
    <div>
      <a href="...">Include selected</a>
    </div>
    <div>
      <a href="...">Exclude selected</a>
    </div>
    <div>
      <a href="...">Exclude all</a>
    </div>
  </div>
  <div class="dual-list-exclude-container">
    <select size="6" multiple="" class="dual-list-ctl dual-list-remove" style="width:200px !important;height:90px !important; color:gray" ondblclick="...">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    </select>
  </div>
</div>

当其中一个列表为空时，容器保持未对齐状态。

关于如何修复它有什么想法吗？

除了修复容器顶部之外，我还尝试添加更多元素，但没有成功。

Answer 1

与任何内联元素一样，默认对齐方式是

baseline

。只需申请

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

<div class="dual-list">
  <div class="dual-list-include-container">
    <select size="6" multiple="" class="dual-list-ctl dual-list-include" style="width:200px !important;height:90px !important;" ondblclick="...">
    </select>
  </div>
  <div class="dual-list-actions">
    <div>
      <a href="...">Exclude all</a>
    </div>
    <div>
      <a href="...">Include selected</a>
    </div>
    <div>
      <a href="...">Exclude selected</a>
    </div>
    <div>
      <a href="...">Exclude all</a>
    </div>
  </div>
  <div class="dual-list-exclude-container">
    <select size="6" multiple="" class="dual-list-ctl dual-list-remove" style="width:200px !important;height:90px !important; color:gray" ondblclick="...">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
  </div>
</div>