Как правильно выровнять текст?

Question

Я пытаюсь составить список ссылок в html. По умолчанию все ссылки выровнены по направлению к левой стороне контейнера , но при изменении шрифта (т. Е. Font-size: 1.5em;) линии образуют шаблон пирамиды, а последний номер не содержится.

Эта проблема возникает как в firefox, так и в хроме.

Вот 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; 
} 

Answer 1

.links { 
    overflow:hidden; 
} 

или Clear:both;

Answer 2

Просто удалите поплавок из вашего класса ранга

.rank 
{ 
/*float:left*/ 
}