Question

我非常接近并且在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的其余部分。我更新了上面的代码，现在它准确地演示了这个问题。如果我从font-size中取出#master-container，它排成一行，但它不是正确的字体大小。我尝试向font-size添加ul.inputlist li input，但这没有帮助。有什么建议？谢谢大家的帮助！

Answer 1

这可能是您所需要的：

label, input {vertical-align: baseline;}

具有相同属性的两个元素都会有所帮助。基线工作也类似。中间版在IE7中有所不同。

希望它有所帮助！

Answer 2

如何在li元素中添加“clear：both”：

ul.inputlist li{width:100%;margin-bottom:5px;clear:both}

右对齐和垂直对齐标签与复选框/单选按钮CSS

2 个答案: