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.

所以它应该在完美的中心height是字符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.

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