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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

有些人可能会对此表示不满。我刚刚花了一些时间（再次）研究无表解决方案，但失败了。我尝试了浮动，绝对/相对定位和类似方法的各种组合。它们不仅主要默默地依赖于单选按钮/复选框的估计高度，而且在不同的浏览器中的行为也有所不同。理想情况下，我想找到一种不假设大小或浏览器特殊问题的解决方案。我可以使用表格，但是我想知道还有什么解决方案。

回答：

我想我终于解决了问题。一种通常推荐的解决方案是使用vertical-align：middle：

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

然而，问题在于，即使从理论上讲它仍然会产生可见的未对准。CSS2规范指出：

将框的垂直中点与父框的基线对齐，再加上父框的x高度的一半。

因此，它应该位于完美的中心（x高度是字符x的高度）。但是，该问题似乎是由于浏览器通常在单选按钮和复选框中添加了一些随机的不均匀边距引起的。例如，您可以使用Firefox在Firefox中检查Firefox的默认复选框边距为3px

3px 0px 5px。我不确定它来自哪里，但其他浏览器的利润似乎也差不多。因此，要获得完美的一致性，就需要摆脱这些空白：

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

仍然值得一提的是，在基于表的解决方案中，边距以某种方式被吞噬，并且所有内容都很好地对齐。

以上是 HTML / CSS中的单选/复选框对齐 的全部内容， 来源链接： utcz.com/qa/432892.html

回到顶部