Html 如何垂直对齐单选按钮集？

我不熟悉html和css

我有三套单选按钮。每组按钮显示在一行中。我想按钮之间的按钮组垂直对齐。我很难用css来实现这一点。我希望避免使用表来解决这个问题。我想我可以通过设置单选按钮标签的宽度来对齐它们，但这不起作用

我的单选按钮显示如下：

我希望它们显示如下：

以下是我的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! */
}

这是我的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>

传输码
22
42
52
NA
截止时间
18
19
NA
汇款通知方式
N
F
E

如果不需要，您不必使用类（编辑：它们是需要的，所以答案已经更新）

---

为什么不给自己更多的HTML元素来使用呢？如果您反对使用表，那么使用无序列表如何

---

把它放在桌子上很好

---

您是否考虑过将它们放在表格中？如果表格不是表格数据，我建议不要使用表格，尤其是在CSST中实现它并不复杂的情况下。这是一个近乎完美的表格位置。也许你也被警察吓坏了：-）干得好。但这并没有显示我的要求。这些按钮是一个大得多的窗体的一部分，这样显示会中断窗体其余部分的流程。这对于垂直堆叠收音机非常有效。非常简单但有效。这很有效。你介意我在接受答案之前先修改一下吗？我不需要

form.remote\u change\u form input[type=radio]

的css规则，因为默认宽度可以。我需要将

form.remote\u change\u form label

的规则更改为

form.remote\u change\u form label.radiolabel

，否则我的复选框标签会被挤压。这个答案的简短形式是我需要将

display:inline block

添加到我的

form.remote\u change\u form label.radiolabel的规则中。我很想-1使用表格的答案，因为问题明确指出我不想使用它们（并暗示我知道如何使用）。但我不会投票否决他们，因为我承认你的回答是真诚的。我认为争论表格的焦点应该在问题下的评论中。
form.remit_change_form label.radiolabel
{
    display:inline-block; /* added this */
    width: 50px;
}

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