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

Question

我对 html 和 css 不太了解。

我有 3 组单选按钮。每组按钮都在同一行显示。我想让这些按钮在每组之间垂直对齐。我无法通过 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>

- Steven Rumbalski

---

你考虑过把它们放在表格里吗？ - LostLin

我建议不要在非表格数据的情况下使用表格，特别是当可以通过CSS轻松实现时。 - Niklas Wulff

这是一个近乎完美的放置表格的位置。也许你也曾经被布局警察吓到过 :-) - Pete Wilson

Answer 1

如果不需要，你不必使用类（注：实际上是需要的，所以答案已更新）。

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

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

- Niklas Wulff

---

这个可以。我接受之前，你介意我编辑一下答案吗？form.remit_change_form input[type=radio]的CSS规则我不需要，因为默认宽度已经足够了。我需要将form.remit_change_form label的规则更改为form.remit_change_form label.radiolabel，否则我的复选框标签会被挤压。 - Steven Rumbalski

这个答案的简短版是，我需要在“form.remit_change_form label.radiolabel”的规则中添加display:inline-block。 - Steven Rumbalski

Answer 2

为什么不给自己更多的HTML元素来使用呢？如果你不喜欢使用表格，那么使用无序列表如何？

http://jsfiddle.net/YYjsT/

- Derek Hunziker

---

干得好。但这不是我要求的显示方式。 这些按钮是更大表单的一部分，这样显示会破坏表单其余部分的流畅性。 - Steven Rumbalski

这对于垂直堆叠收音机非常有效，非常简单但有效。 - Todd R

Answer 3

将其放入表格中效果很好

http://jsfiddle.net/3QJg8/

- LostLin

---

我很想将那些使用表格的答案标为-1，因为问题明确指出我不想使用它们（并意味着我知道如何使用）。但我不会投票反对它们，因为我承认你是出于善意作答的。我认为争论表格的位置应该在问题下的评论中。 - Steven Rumbalski