HTML/CSS中的单选/复选框对齐
HTML/CSS中的单选/复选框对齐
提问于 2008-12-28 17:40:07
将单选按钮/复选框与文本正确对齐的最简洁方法是什么？到目前为止，我使用的唯一可靠的解决方案是基于表的：
<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>这可能会引起一些人的不满。我刚刚花了一些时间(再次)研究了一个无表的解决方案，但失败了。我尝试了浮点数、绝对/相对定位和类似方法的各种组合。不仅因为它们主要依赖于估计的单选按钮/复选框的高度，而且它们在不同的浏览器中的行为也不同。理想情况下，我希望找到一个不假设任何大小或特殊浏览器怪癖的解决方案。我可以使用表，但是我想知道哪里还有其他的解决方案。
回答 9
Stack Overflow用户
发布于 2008-12-28 18:35:44
下面的代码可以在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;
}Stack Overflow用户
发布于 2010-10-28 23:02:15
我发现最好也是最简单的方法就是这样做，因为你不需要添加标签，div或者其他任何东西。
input { vertical-align: middle; margin-top: -1px;}
Stack Overflow用户
发布于 2008-12-28 18:07:00
我根本不会用表格来做这个。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; }注意:我使用了http://www.positioniseverything.net/easyclearing.html中的clearfix类
.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 */页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/396439
复制相关文章
相似问题
腾讯云开发者
