将单选按钮与相应的标签对齐

Posted 2023-03-06

【中文标题】将单选按钮与相应的标签对齐

【英文标题】：Align radio button with corresponding label

【发布时间】：2010-10-15 01:11:27

【问题描述】：

我正在使用 ASP.NET 单选按钮列表控件。

它会生成以下 html。

        <table>
            <tr>
                <td>
                    <input type="radio"/>
                    <label >
                        label 1</label>
                </td>
                <td>
                    <input  type="radio" 
                        value="False" checked="checked" />
                    <label >
                        label 2</label></td>                   
            </tr>
        </table>

到目前为止，一切看起来都很好（至少对用户而言），标签与单选按钮对齐。

但是，当我将字体大小调整为 10 像素时，标签的大小显然看起来更小，但这样做的副作用是标签看起来也与单选按钮的底部对齐。我需要一个标签来对齐单选按钮的中间。

我可以在 IE 中使用以下 css 做到这一点：

  <style type="text/css">
    label
    
        font-size:10px; 
        line-height:12px;
        vertical-align:middle;
     
</style>

但这在 Firefox 或 Chrome 中不起作用

有什么建议吗？

【问题讨论】：

另见：***.com/questions/396439/…

【参考方案1】：

而不是这个：

label 
  font-size: 10px;
  line-height: 12px;
  vertical-align: middle;

试试这个：

label, input[type="radio"] 
  font-size: 10px;
  vertical-align: middle;

【讨论】：

从替换 CSS 中移除 line-height。很高兴它有帮助！

【参考方案2】：

该属性选择器在 IE6 中不起作用 - 我发现的最简单的方法是在单选按钮中添加一个“radio”类，因此 CSS 变为：

label, input.radio
  font-size:10px; 
  vertical-align:middle;

当然，表格不是那种形式的正确标记 - 我个人更喜欢定义列表，在 DT 中带有标签，在 DD 中输入。在我看来，这在语义上是可以的 - 您正在显示用户需要定义（输入）的术语（标签）列表。

标记看起来像这样：

<dl class="formStructure">
    <dt class="radio"><label for="option1">Yes</label></dt>
    <dd class="radio"><input type="radio" name="option" id="option1" value="yes"/></dd>

    <dt class="radio"><label for="option2">No</label></dt>
    <dd class="radio"><input type="radio" name="option" id="option2" value="no"/></dd>
</dl>

【讨论】：

大多数框架如何在表格元素中生成表单确实很奇怪。从语义上讲，它完全没有意义。定义列表有点不稳定...我个人使用有序列表，因为它是表单字段及其对应标签的列表，并且tabindex可以与列表的顺序对齐。无论如何，很好的提出来。