如何正确对齐文本？

我想在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

如何正确对齐文本？

回答

相关问题