どのようにして設定された幅でナビゲーション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--> 

HERESに私の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; 
} 

私はいくつかのプロパティ（パディングとマージン）を変更しましたが、これはどのブラウザでも動作するはずです。