Nhãn căn chỉnh bên phải - Phần tử phải căn chỉnh (CSS)

Question

Tôi có bố cục biểu mẫu mà tôi muốn hiển thị nhãn được căn trái và điều khiển biểu mẫu căn phải. Tôi đã cố gắng để làm cho nó hoạt động bằng cách sử dụng phao: ngay trên điều khiển biểu mẫu (trong trường hợp này a) và sau đó áp dụng lớp clearfix cho nó nhưng clearfix dường như không hoạt động trên hộp chọn của tôi.

Có điều gì sai ở đây hay không rõ ràng không được mong đợi để hoạt động trên phần tử đã chọn?

Tuy nhiên, khi tôi thực hiện việc này, hộp chọn vẫn mở rộng ra ngoài phần dưới của div chứa.

Mã của tôi:

<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

Nếu phần tử select là điều cao nhất, tại sao không nổi nhãn? Bạn cũng có thể tận dụng cơ hội để biến nó thành nhãn thực sự thay vì chỉ một số văn bản trong một số div. Dưới đây là CSS:

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

Đây là HTML:

<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.

Answer 2

Vì bạn đang nổi các yếu tố lựa chọn, nó sẽ không ảnh hưởng đến chiều cao của div chứa nữa. Thử thêm một số phần đệm vào phần tử chứa: http://jsfiddle.net/LZVhN/1/ (cũng đã thêm một số vị trí tương đối để chọn)