複数選択の隣のラベルの縦方向の整列

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は両方defautによってdisplay: inlineです。