ラジオボタンを対応するラベルに合わせる

Question

私はASP.NETラジオボタンリストコントロールを使用しています。

次のHTMLを生成します。

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

これまでのところ、少なくともユーザーにとってはすべての点で問題はなく、ラベルはラジオボタンと並んでいます。

しかし、フォントサイズを10pxに変更すると、ラベルのサイズは明らかに小さくなりますが、その副作用はラベルがラジオボタンの下部に揃うように見えるということです。私は、ラジオボタンの中央にラベルを配置する必要があります。

私は次のCSSをIEでこれを行うことができました：

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

しかしこれは、FirefoxやChrome

で任意の提案を動作しませんか？これに代えて

Answer 1

：

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

これを試してみてください。

は

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

Answer 2

IE6で動作しないこと属性セレクタ - 私が見つけた最も痛みのない方法は "のクラスを追加することですラジオボタンをラジオボタンに追加すると、CSSは次のようになります。

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

もちろん、この種のm - 私は個人的にDTの中のラベルとDDの入力を使って、定義リストを好みます。意味的にはこれは私の意見ではOKです。ユーザーが定義する必要がある用語（入力）のリスト（ラベル）を表示しています。

マークアップは次のようになります。

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