将复选框/单选按钮CSS对齐并垂直对齐标签
我非常接近，可以在Safari，Firefox和IE8中工作，但IE7的标签和单选按钮不能垂直对齐。
我的HTML是：
<div id="master-container">
<fieldset id="test">
<legend>This is a test of my CSS</legend>
<ul class="inputlist">
<li>
<label for="test1">Test 1</label>
<input name="test1" id="test1" type="checkbox" disabled="disabled"/>
</li>
<li>
<label for="test2">Test 2</label>
<input name="test2" id="test2" type="checkbox" disabled="disabled"/>
</li>
</ul>
</fieldset>
</div>
我的CSS是：
html {
font-family:Arial,Helvetica,sans-serif;
}
#master-container {
width:615px;
font-size:12px;
}
ul.inputlist {
list-style-type:none;
}
ul.inputlist li {
width:100%;
margin-bottom:5px;
}
ul.inputlist li label {
width:30px;
text-align:right;
margin-right:7px;
float:left;
}
编辑：
根据建议检查我的HTML和CSS的其余部分。 我更新了上面的代码，现在它准确地证明了这个问题。 如果我从#master-container取出font-size ，它会排成一列，但它不是正确的字体大小。 我试图给ul.inputlist li input添加一个font-size ，但这没有帮助。 有什么建议么？ 谢谢大家的帮助！
这可能是你需要的：
label, input {vertical-align: baseline;}
两个元素具有相同的属性，将有所帮助。 基线工作也相似。 IE7中的中间作品不同。
希望能帮助到你！
如何在李元素中添加“明确：两者”：
ul.inputlist li{width:100%;margin-bottom:5px;clear:both}
上一篇: Align and Vertical Align label with checkbox/radio button CSS