HTML/CSS 中的单选/复选框对齐方式 [英] Radio/checkbox alignment in HTML/CSS

问题描述

将单选按钮/复选框与文本正确对齐的最简洁方法是什么?到目前为止，我一直在使用的唯一可靠的解决方案是基于表格的:

What is the cleanest way to align properly radio buttons / checkboxes with text? The only reliable solution which I have been using so far is table based:

<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

这可能会被一些人反对.我刚刚花了一些时间(再次)研究无表解决方案，但失败了.我尝试了各种浮动、绝对/相对定位和类似方法的组合.不仅他们大多默默地依赖单选按钮/复选框的估计高度，而且他们在不同的浏览器中的表现也不同.理想情况下，我想找到一个解决方案，它不假设任何关于大小或特殊浏览器的怪癖.我可以使用表格，但我想知道哪里有其他解决方案.

This may be frown upon by some. I’ve just spent some time (again) investigating a tableless solution but failed. I’ve tried various combinations of floats, absolute/relative positioning and similar approaches. Not only that they mostly relied silently on an estimated height of the radio buttons / checkboxes, but they also behaved differently in different browsers. Ideally, I would like to find a solution which does not assume anything about sizes or special browser quirks. I’m fine with using tables, but I wonder where there is another solution.

推荐答案

我想我终于解决了这个问题.一种普遍推荐的解决方案是使用 vertical-align: middle:

I think I have finally solved the problem. One commonly recommended solution is to use vertical-align: middle:

<input type="radio" style="vertical-align: middle"> Label

然而，问题是这仍然会产生可见的错位，即使它理论上应该可行.CSS2 规范说:

The problem, however, is that this still produces visible misalignments even though it should theoretically work. The CSS2 specification says that:

vertical-align: middle: 将框的垂直中点与父框的基线加上父框 x 高度的一半对齐.

vertical-align: middle: Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

所以它应该在完美的中心(x-height是字符x的高度).然而，这个问题似乎是由于浏览器通常为单选按钮和复选框添加一些随机不均匀的边距造成的.例如，可以使用 Firebug 在 Firefox 中检查，Firefox 中的默认复选框边距是 3px 3px 0px 5px.我不确定它来自哪里，但其他浏览器似乎也有类似的利润率.因此，要获得完美对齐，您需要去掉这些边距:

So it should be in the perfect centre (the x-height is the height of the character x). However, the problem seems to be caused by the fact browsers commonly add some random uneven margins to radio buttons and checkboxes. One can check, for instance in Firefox using Firebug, that the default checkbox margin in Firefox is 3px 3px 0px 5px. I'm not sure where it comes from, but the other browsers seem to have similar margins as well. So to get a perfect alignment, one needs to get rid of these margins:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

注意到在基于表格的解决方案中边距以某种方式被吃掉并且一切都很好地对齐仍然很有趣.

It is still interesting to note that in the table based solution the margins are somehow eaten and everything aligns nicely.

这篇关于HTML/CSS 中的单选/复选框对齐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！