如何在設置的寬度上均勻分配導航li標籤

Question

我無法將導航欄均勻分佈在4列網格中。我需要它，因此每個li更像是一個按鈕塊，它們寬度相等，因此懸停在邊框頂部都是對稱的。

這裏的網站：http://designobvio.us/portfolio/index.html

HTML：

<div class="nav-wrapper grid_4"> 
     <nav> 
      <ul> 
      <li> 
       <a href="/" id="">portfolio</a> 
      </li> 
       <li> 
       <a href="/" id="">resume</a> 
      </li> 
       <li> 
       <a href="/" id="">blog</a> 
      </li> 
      <li> 
       <a href="." id="about-btn">about me</a> 
      </li> 
      </ul> 
     </nav> 
    </div><!--end of nav-wrapper--> 

繼承人我CSS：

.nav_-wrapper nav ul{} 
.nav-wrapper nav ul li 
    { 
float:right; 
display: -moz-inline-stack; 
display: inline-block; 
vertical-align: top; 
margin: 5px; 
zoom: 1; 
margin-top:35px; 
padding: 
    *display: inline; 
    } 
.nav-wrapper nav ul li a { 
list-style:none; 

text-decoration:none; 
font-size:13.5px; 

    } 

Answer 1

沒有一個position: relative;無法修復。檢查：http://jsfiddle.net/X8G2H/

你的HTML可以保持不變，但你的CSS轉換成這樣：

.nav-wrapper nav ul li { 
    float:right; 
    display: block; 
    vertical-align: top; 
    margin: 5px; 
    zoom: 1; 
} 

.nav-wrapper nav ul li a { 
    list-style:none; 
    text-decoration:none; 
    font-size:13.5px; 
    display: block; 
    padding-top: 34px; 
    width: 59px; 
    text-align: center; 
} 

.nav-wrapper nav ul li a:hover { 
    border-top: 5px solid #E58; 
    position: relative; 
    top: -5px; 
} 

我確實改變了一些屬性（padding和margin），但這應該在任何瀏覽器中正常工作。