導航li對齊

Question

我遇到問題，我無法獲得我的'li'寬度正確。我有我正在努力的設計，他們看起來是20px除了與display:inline-block右邊，但我似乎無法得到正確的數字。 JS Fiddle

HTML：

<div class="footer"> 
      <nav> 
       <ul> 
        <li><a href="#">Terms of Use</a></li> 
        <li><a href="#">Site Map</a></li> 
        <li><a href="#">Privacy Policy</a></li> 
        <li><a href="#">Help</a></li> 
        <li><a href="#">Company</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul>  
      </nav> 

      </div>​ 

CSS：

.footer nav{ 
    float:right; 
    width:530px; 
    padding:13px 0 0 0; 
} 
.footer nav ul{ 
    list-style:none; 
} 
.footer nav li{ 
    display:inline-block; 
    width:80px; 
    text-align:center; 
} 
.footer nav li a{ 
    text-decoration:none; 
    color:#000; 
}​ 

Answer 1

如果要固定它們之間的距離，你不能使用內容固定寬度的列表項寬度各不相同，而且不能居中文本。只需將寬度保留爲auto，並將margin-right設置爲20px，以使它們彼此分開。