左揃えラベル - 右揃え選択要素（CSS）

Question

ラベルレイアウトを左に、フォームコントロールを右に揃えて表示するフォームレイアウトがあります。私は浮動小数点数を使用して動作させるようにしています：フォームコントロール（この場合はa）を右クリックしてからclearfixクラスを適用しますが、clearfixは選択ボックスで動作していないようです。

ここに何か問題がありますか、またはselect要素で動作する予定のないclearfixはありますか？

しかし、私がこれを行うと、選択ボックスはまだdivの下にあります。

マイコード：

<style type="text/css"> 
#category-select { 
left: 0px; 
top: 0px; 
width: 350px; 
border: 1px solid #666; 
} 
select#category { 
float: right; 
} 
select.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
</style><!-- main stylesheet ends, CC with new stylesheet below... --> 
<!--[if IE]> 
<style type="text/css"> 
    select.clearfix { 
    zoom: 1; 
    } 
</style> 
<![endif]--> 

<div id="triage"> 
    <div id="category-select"> 
      Category: 
      <select class="ipad-dropdown clearfix" id="category" name="category"> 
       <option value="A">A - Emergency 
       <option value="B">B - Urgent 
       <option value="C">C - ASAP 
       <option value="D" selected>D - Standard 
      </select> 
    </div> 
</div> 

Answer 1

select要素が最も高ければ、ラベルを浮かべてください。また、divのテキストの代わりに実際にラベルにすることもできます。ここではCSSだ：

<div id="triage"> 
    <div id="category-select"> 
     <label for="category">Category:</label> 
     <select class="ipad-dropdown clearfix" id="category" name="category"> 
      <option value="A">A - Emergency</option> 
      <option value="B">B - Urgent</option> 
      <option value="C">C - ASAP</option> 
      <option value="D" selected>D - Standard</option> 
     </select> 
    </div> 
</div> 

Here's the demo：

#category-select { 
    left: 0px; 
    top: 0px; 
    width: 350px; 
    border: 1px solid #666; 
    text-align: right; 
} 
#category-select label { 
    float: left; 
    margin: 1px; 
} 

ここではHTMLです。

Answer 2

あなたはselect要素を浮動しているので、それはもう含むdiv要素の高さには影響しません。含める要素にいくつかのパディングを追加してみてください：http://jsfiddle.net/LZVhN/1/（選択に相対的な位置も追加されています）