響應式導航，無法定義百分比寬度/高度

Question

因此，我正在嘗試構建一個響應式導航菜單，該菜單將與媒體查詢進行縮放。

問題是（而且這是一個愚蠢的我不能工作），我不能讓一個標籤出現塊級元素（我認爲）。

這裏的HTML：

<div class="navbuttons"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Expertise</a></li> 
     <li><a href="#">Capabilities</a></li> 
     <li><a href="#">Case Studies</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div> <!-- end div navbuttons --> 

而CSS：

.navbuttons { 
    position: relative; 
    height: 100px; 
    width: 50%; 
    background-color: blue; 
    float: left; 
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear; 
} 

.navbuttons ul { 
    list-style: none; 
    margin:0; 
    padding:0; 
    float: left; 
} 

.navbuttons li { 
    float:left; 
} 

.navbuttons li a { 
    background: #444; 
    display: block; 
    float: left; 
    line-height: 100px; 
    height: 100%; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    width: 16.5%; 
} 

然而，如果我用像素來定義寬度/高度，我可以讓它看起來大概我多麼希望（儘管它顯然不是流暢的，就像我需要的那樣）。

.navbuttons { 
    position: relative; 
    height: 100px; 
    width: 50%; 
    background-color: blue; 
    float: left; 
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear; 
} 

.navbuttons ul { 
    list-style: none; 
    margin:0; 
    padding:0; 
    float: left; 
} 

.navbuttons li { 
    float:left; 
} 

.navbuttons li a { 
    background: #444; 
    display: block; 
    float: left; 
    line-height: 100px; 
    height: 100px; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    width: 100px; 
} 

哪裏出錯了？

Answer 1

一旦您指定display: block;，A標籤確實是塊級別，但是，16.5％是從其自然寬度（即基於內部文本的100％寬度）計算出來的。

根據您的需要，您可能需要刪除寬度參數並簡單地添加填充。請參閱：http://jsfiddle.net/bLS6B/。這樣，寬度取決於導航文本，而不是某個預設寬度。或者，您可以指定具有相似效果的120％。