[英]Align radio button with corresponding label
我正在使用 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 像素时,label 的大小显然看起来更小,但这样做的副作用是 label 看起来也像与单选按钮的底部对齐。 我需要将 label 对齐到单选按钮的中间。
我能够在 IE 中使用以下 css 做到这一点:
<style type="text/css">
label
{
font-size:10px;
line-height:12px;
vertical-align:middle;
}
</style>
但是,这在 Firefox 或 Chrome 中不起作用
有什么建议么?
而不是这个:
label {
font-size: 10px;
line-height: 12px;
vertical-align: middle;
}
尝试这个:
label, input[type="radio"] {
font-size: 10px;
vertical-align: middle;
}
该属性选择器在 IE6 中不起作用 - 我发现的最简单的方法是在单选按钮中添加一个 class 的“收音机”,因此 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.