HTML/CSS中的广播/复选框对齐方式

Question

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

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

有些人可能会对此不屑一顾.我花了一些时间(再次)调查一个无表格的解决方案,但失败了.我尝试了浮动,绝对/相对定位和类似方法的各种组合.不仅如此,他们主要依赖于单选按钮/复选框的估计高度,但它们在不同浏览器中的表现也不同.理想情况下,我想找到一个解决方案,它不会假设大小或特殊的浏览器怪癖.我很喜欢使用表格,但我想知道还有其他解决方案.

Answer 1

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

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

然而,问题是这仍然会产生明显的错位,即使理论上它应该起作用.CSS2规范说:

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

所以它应该在完美的中心(x高度是角色x的高度).但是,问题似乎是由于浏览器通常会向单选按钮和复选框添加一些随机不均匀的边距.例如,在使用Firebug的Firefox中,可以检查Firefox中的默认复选框边距3px 3px 0px 5px.我不知道它来自哪里,但其他浏览器似乎也有相似的边距.因此,为了获得完美的对齐,需要摆脱这些边缘:

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

值得注意的是,在基于表格的解决方案中,边距以某种方式被吃掉,一切都很好地对齐.

Answer 2

以下适用于Firefox和Opera(对不起,我目前无法访问其他浏览器):

<div class="form-field">
    <input id="option1" type="radio" name="opt"/>
    <label for="option1">Option 1</label>
</div>

CSS:

.form-field * {
    vertical-align: middle;
}

Answer 3

我发现最好和最简单的方法是这个,因为你不需要添加标签,div或任何东西.

input { vertical-align: middle; margin-top: -1px;}

Answer 4

我根本不会使用表格.CSS可以轻松地做到这一点.

我会做这样的事情:

   <p class="clearfix">
      <input id="option1" type="radio" name="opt" />
      <label for="option1">Option 1</label>
   </p>

p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }

注意:我使用了以下的clearfix类:http://www.positioniseverything.net/easyclearing.html

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */