Question

我正在使用此代码制作响应式链接（即，当观看者在他们链接的页面上时突出显示它们）：

http://www.hicksdesign.co.uk/else/cssnav/

这需要使用ID编码一个简单的html导航栏。

但是，我创建的导航栏由于某种原因将链接结构化为垂直列表。我错过了一些明显的东西，还是这是一个浏览器方面的故障？我从所述页面获得的代码的列表是水平的，所以我很难看到为什么它甚至会以这种方式格式化。奇怪的是，链接在悬停时不会改变颜色，所以我不认为li a：hover样式也正常工作。

这是我正在使用它的页面（https://dl.dropboxusercontent.com/u/33061840/site/responsivedesigntest.html），这是css为链接设置样式的部分。

#navcontainer ul {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;

}

#navcontainer ul li {
    display: inline;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
}

#navcontainer ul li a {
    border-right: none;
    padding: 0;
    margin: 0 0 10px 0;
    color: #f5d7b4;
    text-decoration: none;
    display: block;
    text-align: center;
    font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover {
    color: #930;
    background: #f5d7b4;
}

Answer 1

您的选择器错了！

#navcontainer ul不存在。相反，您的navlist元素上有一个ID ul。

这就是诀窍：

查看<b>NAVIGATE:</b>内ul的移动情况，并查看下面的CSS更改。

<div class="section group">
    <div class="col span_1_of_2">
                <b>NAVIGATE:</b>
                            <ul id="navlist"> 
                                <li><a href="home.html" id="home"</a>Home</li>
                                <li><a href="zukan.html" id="zukan">Zukan</a></li>
                                <li><a href="Stamps" id="stamps">Stamps</a></li>
                                <li><a href="Photography" id="photography">Photos</a></li>
                            </ul>
            </div>
</div>

-

#navlist {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#navlist li {
    display: inline;
    float: left;
    text-align: center;
    padding: 10px;
    margin: 0;
}

#navlist li a {
    border-right: none;
    padding: 0;
    color: #f5d7b4;
    text-decoration: none;
    display: block;
    text-align: center;
    font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navlist li a:hover {
    color: #930;
    background: #f5d7b4;
}

http://jsfiddle.net/h2Xg5/1/

从教程中复制代码时要小心，务必仔细检查您要复制的内容！

ul li navbar有链接显示为垂直，项目符号列表，无论我如何设置样式？

1 个答案: