右對齊和垂直對齊帶複選框/單選按鈕的標籤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

回答

相關問題