如何正確對齊文本？

我想在html中製作一個鏈接列表。默認情況下，所有鏈接均朝向容器左側對齊，但當字體改變時（即font-size：1.5em;），這些線條形成一個金字塔模式，並且不包含最後一個數字。 links in pyramid pattern 如何正確對齊文本？

在firefox和chrome中都會出現此問題。

這裏是HTML

<div id="container"> 
     <div id="content"> 
      <div class="links"> 
       <span class="rank" style="width:2.20ex;" >1</span> 
       <a href="http://www.youtube.com/">this is a test</a> 
      </div> 
      <div class="links"> 
       <span class="rank" style="width:2.20ex;" >2</span> 
       <a href="http://www.youtube.com/">this is a test</a> 
      </div> 
      <div class="links"> 
       <span class="rank" style="width:2.20ex;" >3</span> 
       <a href="http://www.youtube.com/">this is a test</a> 
      </div> 
      <div class="links"> 
       <span class="rank" style="width:2.20ex;" >4</span> 
       <a href="http://www.youtube.com/">this is a test</a> 
      </div> 
      <div class="links"> 
       <span class="rank" style="width:2.20ex;" >5</span> 
       <a href="http://www.youtube.com/">this is a test</a> 
      </div> 
      <div class="links"> 
       <span class="rank" style="width:2.20ex;" >6</span> 
       <a href="http://www.youtube.com/">this is a test</a> 
      </div> 
      <div class="links"> 
       <span class="rank" style="width:2.20ex;" >7</span> 
       <a href="http://www.youtube.com/">this is a test</a> 
      </div> 
      <div class="links"> 
       <span class="rank" style="width:2.20ex;" >8</span> 
       <a href="http://www.youtube.com/">this is a test</a> 
      </div> 
      <div class="links"> 
       <span class="rank" style="width:2.20ex;" >9</span> 
       <a href="http://www.youtube.com/">this is a test</a> 
      </div> 
      <div class="links"> 
       <span class="rank" style="width:2.20ex;" >10</span> 
       <a href="http://www.youtube.com/">this is a test</a> 
      </div> 
     </div> 
    </div>

這裏是CSS

#container { 
    margin: 0 auto; 
    width: 1024px; 
} 

#content { 
    background-color: green; 
} 

.rank { 
    color: #c63131; 
    float: left; 
    font-family; arial; 
    font-size: 1.5em; 
    margin-right: 0.2em; 
    text-align: right; 
} 

.links { 
    margin-left: 3px; 
} 

.links a { 
    text-decoration: none; 
}

來源

2013-03-02 bab

你沒有清理你的浮標。 – cimmanon 2013-03-02 21:42:43

.links { 
    overflow:hidden; 
}

或Clear:both;

來源

2013-03-02 21:43:17 zloctb

你知道爲什麼溢出：隱藏;使內容div包含10？ – bab 2013-03-02 21:55:37

剛剛從你的等級類別中刪除浮動

.rank 
{ 
/*float:left*/ 
}

來源

2013-03-02 21:46:33 Sachin

如何正確對齊文本？

回答

相關問題