0

因此，我正在尝试构建一个响应式导航菜单，该菜单将随媒体查询一起扩展。

问题是（这是一个我无法解决的愚蠢问题）我无法让 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;
}

哪里出错了？

4

1 回答 1

2

一旦您在 A 标记上指定display: block;它们，它们确实是块级的，但是，16.5% 是根据它们的自然宽度计算的（即它们的 100% 宽度基于内部文本）。

根据您的需要，您可能想要删除宽度参数并简单地添加填充。请参阅：http: //jsfiddle.net/bLS6B/。这样，宽度取决于导航文本，而不是某些预设宽度。或者，您可以指定具有类似效果的 120%。

于 2012-07-06T21:15:05.983 回答