响应式导航，无法定义百分比宽度/高度

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％。