css - 多选旁边标签的垂直对齐

Question

我想知道，如何在顶部的多选或文本区域旁边放置标签？例如我有这段代码

<div class="form-group">
    <label class="control-label" for="SelectId">label</label>
    <select name="SelectId" id="SelectId" style="min-width: 604px;" size="5" multiple="multiple">
        <option value="0">No Selection</option>
          ...
    </select>
</div>

图片看起来像

我找到的唯一解决方案是相对定位，它可以工作，但在调整浏览器窗口大小时会损坏。

<div class="form-group">
    <label class="control-label" for="SelectId">label</label>
    <select name="SelectId" id="SelectId" style="position: relative; top: -75px;" size="5" multiple="multiple">
        <option value="0">No Selection</option>
          ...
    </select>
</div>

有什么想法吗？

Answer 1

使用 vertical-align，您可以根据同一行中的其他 inline 元素定位 inline 元素。

.control-label { 
    vertical-align: top; 
}

label 和 select 默认都是 display: inline。