如何垂直对齐多组单选按钮？

Question

I am new to html and css.

I have 3 sets of radio buttons. Each set of buttons is displayed in a singe line. I would like the buttons to align vertically between sets of buttons. I am having trouble accomplishing this with css. I would like to avoid using tables to solve this problem. I figured I could get the radio buttons aligned by setting the width of their labels, but it doesn't work.

My radio buttons display like this:

I want them to display like this:

Here's my css:

form.remit_change_form label.fixedwidth {
    display: block;
    width: 180px;
    float: left;
}

form.remit_change_form input.radiolabel {
    width: 35px /* doesn't make any visual change! */
}

Here's my html:

<div>
  <label for="tran_code" class="fixedwidth">Tran Code</label>
  <input type="radio" class="radioinput" name="tran_code" id="tran_code_22" 
    value="22"/>
  <label for="tran_code_22" class="radiolabel">22</label>
  <input type="radio" class="radioinput" name="tran_code" id="tran_code_42" 
    value="42"/>
  <label for="tran_code_42" class="radiolabel">42</label>
  <input type="radio" class="radioinput" name="tran_code" id="tran_code_52" 
    value="52"/>
  <label for="tran_code_52" class="radiolabel">52</label>
  <input type="radio" class="radioinput" name="tran_code" id="tran_code_na" 
    value="NA"/>
  <label for="tran_code_na" class="radiolabel">NA</label>
</div>
<div>
  <label for="cut_off_time" class="fixedwidth">Cut-off Time</label>
  <input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_18.00" 
    value="18.00"/>
  <label for="cut_off_time_18.00" class="radiolabel">18.00</label>
  <input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_19.00" 
    value="19.00"/>
  <label for="cut_off_time_19.00" class="radiolabel">19.00</label>
  <input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_na" 
    value="NA"/>
  <label for="cut_off_time_na" class="radiolabel">NA</label>
</div>
<div>
  <label for="remit_notify_method" class="fixedwidth">Remit Notify Method</label>
  <input type="radio" class="radioinput" name="remit_notify_method" 
    id="remit_notify_method_n" value="N"/>
  <label for="remit_notify_method_n" class="radiolabel">N</label>
  <input type="radio" class="radioinput" name="remit_notify_method" 
    id="remit_notify_method_f" value="F"/>
  <label for="remit_notify_method_f" class="radiolabel">F</label>
  <input type="radio" class="radioinput" name="remit_notify_method" 
    id="remit_notify_method_e" value="E"/>
  <label for="remit_notify_method_e" class="radiolabel">E</label>
</div>

Answer 1

You don't have to use classes, if not otherwise needed ( edit : they were needed, so answer has been updated).

form.remit_change_form label.radiolabel
{
    display:inline-block; /* added this */
    width: 50px;
}

form.remit_change_form label.fixedwidth {
    width: 180px;
}

Answer 2

Why not give yourself some more HTML elements to work with? If you're opposed to using tables, how about using an unordered list?

http://jsfiddle.net/YYjsT/

Answer 3

Putting it in a table works nicely

http://jsfiddle.net/3QJg8/