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

【问题标题】：How do I vertically align sets of radio buttons?如何垂直对齐单选按钮集？
【发布时间】：2011-03-22 16:09:23
【问题描述】：

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

【问题讨论】：

你考虑过把它们放在桌子上吗？
如果表格不是表格数据，我建议不要使用表格，尤其是在 css 中实现它并不复杂时
这是一个近乎完美的餐桌位置。也许你也被 Layout Police 恐吓过 :-)

标签： html css

【解决方案1】：

如果不需要，您不必使用类（编辑：需要它们，因此已更新答案）。

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

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

【讨论】：

这行得通。您介意我在接受之前编辑答案吗？我不需要 form.remit_change_form input[type=radio] 的 css 规则，因为默认宽度很好。我需要将form.remit_change_form label 的规则更改为form.remit_change_form label.radiolabel，否则我的复选框标签会被挤压。
这个答案的简短形式是我需要将display:inline-block 添加到form.remit_change_form label.radiolabel 的规则中。

【解决方案2】：

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

http://jsfiddle.net/YYjsT/

【讨论】：

干得好。但这并没有显示我的要求。这些按钮是更大表单的一部分，这样显示会破坏表单其余部分的流程。
这很适合垂直堆叠收音机。非常简单而有效。

【解决方案3】：

把它放在桌子上效果很好

http://jsfiddle.net/3QJg8/

【讨论】：

我很想 -1 使用表格的答案，因为问题明确指出我不想使用它们（并暗示我知道如何使用）。但我不会投票给他们，因为我承认你是真诚地回答的。我认为争论表格的地方将在问题下方的 cmets 中。