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

Question

所以我正在尝试构建一个响应式导航菜单，该菜单将随着媒体查询进行扩展。

问题是（这是一个我无法解决的愚蠢问题）我无法让 a 标签显示为块级元素（我认为）。

这是 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%;
}

然而，如果我使用 px 来定义宽度/高度，我可以让它看起来大致是我想要的（尽管它显然不是流动的，就像我需要的那样）。

.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%，这具有类似的效果。