Question

我正在使用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>

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

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

我能够在IE中使用以下css执行此操作：

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

然而，这在Firefox或Chrome中无效

有什么建议吗？

Answer 1

而不是：

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

试试这个：

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

Answer 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>

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

2 个答案: