文本未對齊

Question

我創建了以下HTML CSS Code：

<div class="Pager"> 
    <span class="Resume">Posts 1 to 40 of 220X</span> 
    <ul class="Buttons"> 
    <li><span>123</span></li> 
    </ul> 
    <div class="Clear"></div> 
</div> 

.Class {clear: both;} 

div.Pager {} 

div.Pager span.Resume { 
    font-family: Arial; 
    font-size: 0.9em; 
    line-height: 1; 
    float: left; 
} 

div.Pager ul.Buttons { 
    float: left;  
} 

div.Pager ul.Buttons li { 
    float: left; 
} 

div.Pager ul.Buttons li span { 
    font-family: Arial; 
    font-size: 0.9em; 
    line-height: 1; 
} 

有誰知道爲什麼「123」的文字出現低那麼前面的文字嗎？

謝謝你， 米格爾

Answer 1

移動你的「字體樣式設置CSS」的最外層的元素（div.Pager），並將它只有元素這樣你就不會無謂地定義同樣的事情上：

http://jsfiddle.net/thirtydot/85AKq/9/

這工作，因爲font-family，font-size，line-height都是可繼承的 - 後代可以從父元素繼承這些屬性。

---

我敢肯定，這是無關緊要的，但要使其工作時「歸一化CSS」中的jsfiddle被關閉，加margin: 0; padding: 0; list-style: none您ul：

http://jsfiddle.net/thirtydot/85AKq/10/

Answer 2

改變line-height正常兩個跨度爲我工作

div.Pager span.Resume { 
    float: left; 
    font-family: Arial; 
    font-size: 0.9em; 
    line-height: normal; 
} 

div.Pager ul.Buttons li span { 
    font-family: Arial; 
    font-size: 0.9em; 
    line-height: normal; 
} 

除了改變li和ul去除斑點和間距完全固定它。

div.Pager ul.Buttons li { 
    float: left; 
    list-style:none; 
    padding:0; 
    margin:0; 
} 

div.Pager ul.Buttons { 
    float: left; 
    list-style:none; 
    padding:0; 
    margin:0; 
} 

Answer 3

這是因爲文本是在無序列表中。列表具有由瀏覽器確定的自動保證金屬性。爲了得到它去達到你將不得不通過給列表中的margin-top: -3px風格像這樣來抵消它的位置更靠近頂部同一水平：

http://jsfiddle.net/hnYUR/