如何在設定的寬度上均勻分布導航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;
}

我確實更改了一些屬性（填充和邊距），但這在任何瀏覽器中都可以正常工作。