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.
My HTML is:
<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:
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. 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. I tried to add a font-size to ul.inputlist li input but that didn't help. 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.
Hope it helps!
如何在李元素中添加“明确：两者”：
ul.inputlist li{width:100%;margin-bottom:5px;clear:both}
上一篇: 用CSS复选框对齐复选框文本