[英]Right-Align and Vertical Align label with checkbox/radio button CSS
I'm very close and have this working in Safari, Firefox and IE8, however IE7 the labels and radio buttons do not align vertically. 我非常接近并且在Safari,Firefox和IE8中使用它,但IE7标签和单选按钮不能垂直对齐。
My HTML is: 我的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>
My CSS Is: 我的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;
}
EDIT: 编辑:
Based on the suggestion to check the rest of my html and css. 根据建议检查我的html和CSS的其余部分。 I updated the code above and now it accurately demonstrates the problem. 我更新了上面的代码,现在它准确地演示了这个问题。 If I take font-size
out of #master-container
it lines up but then it is not the proper font-size. 如果我从#master-container
取出font-size
,它会排成一行但是它不是正确的字体大小。 I tried to add a font-size
to ul.inputlist li input
but that didn't help. 我试图在ul.inputlist li input
添加一个font-size
,但这没有帮助。 Any suggestions? 有什么建议么? Thanks for your help everyone! 谢谢大家的帮助!
This could be what you needed: 这可能是你需要的:
label, input {vertical-align: baseline;}
Both element with the same property, will help. 具有相同属性的两个元素都会有所帮助。 Also baseline works similar. 基线工作也类似。 middle works different in IE7. 中间的工作在IE7中有所不同。
Hope it helps! 希望能帮助到你!
如何在li元素中添加“clear:both”:
ul.inputlist li{width:100%;margin-bottom:5px;clear:both}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.