HTML/CSS 中的单选/复选框对齐

2022-01-21 00:00:00 checkbox radio-button 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 高度是字符 x 的高度).但是，问题似乎是由于浏览器通常会为单选按钮和复选框添加一些随机不均匀的边距.可以检查，例如在 Firefox 中使用 Firebug，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.

相关文章