ドロップダウンリストの前にテキストラベルを追加する

Question

選択ボックスの前にラベルを追加しようとしていますが、両方の要素を含むdivタグを「インラインブロック」に設定しました。しかし、スパンはまだ選択ボックスの上にあります。

<div class="unselected-field" style="display: inline-block;" id="selectCountry"> 
    <span>test</span><select id="countrySelect" name="countrySelect"></select> 
</div> 

私は、これは実際にはクロームhttp://jsfiddle.net/tVT67/に適切

を表示するために取得することができたので、

Answer 1

<select>の幅プラス<span>の幅が含ま<div>よりも大きい場合、<select>ではなく、その横にあることの<span>下に行くことを強制されます。また、<select>の幅は含まれているテキストに依存しているので、静的な幅を指定しない限り、幅が変化します。

私は通常、入力の周りにラベルラップ

Answer 2

あなたはunselected-fieldでコードを投稿できる、私もinline-blockを削除することができますし、それはまだhttp://jsfiddle.net/H3GDN/

に動作します... Chromeでいます

Answer 3

：私http://jsfiddle.net/KG9hL/1/

コースの場合を除き含むdivの幅がlabelとselectの要素を合わせた幅より小さいため

<div class="unselected-field" style="display: inline-block;" id="selectCountry"> 
    <label>Test:<select id="countrySelect" name="countrySelect"> 
     <option>Option 1</option> 
     </select> 
    </label> 
</div>​ 

Answer 4

作品罰金を： http://jsfiddle.net/74bRX/

Answer 5

1つのオプションは、最初に選択したオプションdisableになります。

<select id="countrySelect" name="countrySelect"> 
    <option disabled selected>Select Your Country:</option> 
    <option>USA</option> 
    <option>Germany</option> 
    <option>France</option> 
</select>