линия кнопки вверх радио

Question

У меня есть следующий HTML:

<tr> 
    <td class=tabTwo vAlign=top> 
     <table border=0 cellPadding=0 cellSpacing=0 width=100%> 
      <tr> 
       <td vAlign=top width=5%>4.</td> 
       <td>Test 1?</td> 
      </tr> 
      <tr> 
       <td width=5%></td> 
       <td colSpan=2>a) <input type="radio" name="S1Q4" value="a" id="s1q4a" /> <label for="s1q4a">A</label></td> 
      </tr> 
      <tr> 
       <td width=5%></td> 
       <td colSpan=2>b) <input type="radio" name="S1Q4" value="b" id="s1q4b" /> <label for="s1q4b">B</label></td> 
      </tr> 
      <tr> 
       <td width=5%></td> 
       <td colSpan=2>c) <input type="radio" name="S1Q4" value="c" id="s1q4c" /> <label for="s1q4c">C</label></td> 
      </tr> 
      <tr> 
       <td width=5%></td> 
       <td colSpan=2>d) <input type="radio" name="S1Q4" value="d" id="s1q4d" /> <label for="s1q4d">D</label></td> 
      </tr> 
     </table> 
    </td> 
</tr> 

Производит:

Как я сделал радио-кнопки выравнивания по прямой линии? B & C кажутся кривыми.

Answer 1

HTML

<div class="form-wrapper"> 
    <div class="radio-choice"> 
     <span>a) </span> 
     <input id="option1" type="radio" name="opt1"/> 
     <label for="option1">Option 1</label> 
    </div> 

    <div class="radio-choice">  
     <span>b) </span> 
     <input id="option2" type="radio" name="opt2"/> 
     <label for="option2">Option 2</label> 
    </div> 

    <div class="radio-choice"> 
     <span>c) </span> 
     <input id="option3" type="radio" name="opt3"/> 
     <label for="option3">Option 3</label> 
    </div> 
</div> 

CSS

.radio-choice * { 
    vertical-align: middle; 
} 

.form-wrapper div{ 
    float: left; 
    clear: both; 
} 

.form-wrapper span { 
    display: inline-block; 
    width: 10px; 
} 

http://jsfiddle.net/NewwV/1/