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

然而，如果我使用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

A标签在您指定display: block;后确实是块级别，但是，16.5％是根据其自然宽度计算的（即基于内部文本的100％宽度）。

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

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

1 个答案: