Căn chỉnh nút radio có nhãn tương ứng

Question

Tôi đang sử dụng điều khiển danh sách nút radio ASP.NET.

Tạo HTML sau.

 <table> 
      <tr> 
       <td> 
        <input type="radio"/> 
        <label > 
         label 1</label> 
       </td> 
       <td> 
        <input type="radio" 
         value="False" checked="checked" /> 
        <label > 
         label 2</label></td>     
      </tr> 
     </table> 

Mọi thứ đều ổn cho đến nay (ít nhất là cho người dùng), nhãn được căn chỉnh với nút radio.

Tuy nhiên khi tôi thay đổi kích thước phông chữ để nói 10px, kích thước của nhãn rõ ràng trông nhỏ hơn nhưng tác dụng phụ của nhãn đó cũng giống như được căn chỉnh ở cuối nút radio. Tôi cần một nhãn để được gán cho một nút radio.

tôi đã có thể làm điều này trong IE với css sau:

<style type="text/css"> 
    label 
    { 
     font-size:10px; 
     line-height:12px; 
     vertical-align:middle; 
    } 
</style> 

Tuy nhiên điều này không làm việc trong Firefox hoặc Chrome

Bất kỳ lời đề nghị?

Answer 1

Thay vì điều này:

label { 
    font-size: 10px; 
    line-height: 12px; 
    vertical-align: middle; 
} 

thử điều này:

label, input[type="radio"] { 
    font-size: 10px; 
    vertical-align: middle; 
} 

Answer 2

Đó selector thuộc tính sẽ không làm việc trong IE6 - phương pháp không gây đau đớn nhất mà tôi đã tìm thấy là thêm một lớp ' radio 'cho các nút radio của bạn, vì vậy CSS sẽ trở thành:

label, input.radio{ 
    font-size:10px; 
    vertical-align:middle; 
} 

Tất nhiên, bảng không phải là đánh dấu chính xác cho loại đó cho m - cá nhân tôi ưu tiên một danh sách định nghĩa, với các nhãn bên trong DT và các đầu vào trong DD. Về mặt ngữ nghĩa, điều này là đúng theo ý kiến ​​của tôi - bạn đang hiển thị một danh sách các thuật ngữ (các nhãn) mà người dùng cần xác định (các đầu vào).

Các đánh dấu sẽ trông như thế này:

<dl class="formStructure"> 
    <dt class="radio"><label for="option1">Yes</label></dt> 
    <dd class="radio"><input type="radio" name="option" id="option1" value="yes"/></dd> 

    <dt class="radio"><label for="option2">No</label></dt> 
    <dd class="radio"><input type="radio" name="option" id="option2" value="no"/></dd> 
</dl>