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

我非常接近并且可以在Safari，Firefox和IE8中工作，但IE7的标签和单选按钮不会垂直对齐。右对齐和垂直对齐带复选框/单选按钮的标签CSS

我的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，但这没有帮助。有什么建议么？谢谢大家的帮助！

来源

2010-02-11 Jon

我可以大概算出来，但有你正在使用更多的代码？ – nickelleon 2010-02-12 05:19:57

这可能是你需要的东西：

label, input {vertical-align: baseline;}

具有相同属性的两个元素，将帮助。基线工作也相似。 IE7中的中间作品不同。

希望它有帮助！

来源

2010-02-11 14:28:18

嗨艾伦，感谢您的建议，但不幸的是它没有工作。任何其他想法？ – Jon 2010-02-11 15:19:46

我发现这个：http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers我希望它可以帮助你！ – 2010-02-12 12:25:10

嗨，Allan，我不得不取出一个* {margin：0px; padding：0px;}我有，给ul.inputlist li一个18px的行高，然后在标签上使用vertical-align：baseline。谢谢！！！！！！！！！ – Jon 2010-02-12 15:32:06

有关添加什么“明确：既”到li元素：

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

来源

2010-02-11 20:29:55 attack

感谢您的建议，但这也没有奏效。任何其他想法？ – Jon 2010-02-11 20:51:59

当我测试上面的标记/ CSS时，它在Firefox中不适用于我（但它在IE7中），所以我觉得必须有其他的事情发生。有更多的标记/ CSS？另一个可能的解决方案是添加更多的边缘底部，比如20px左右。 – attack 2010-02-12 02:14:24

我添加了导致问题的代码。感谢您的建议！ – Jon 2010-02-12 13:19:00

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

回答

相关问题