Css ul li导航栏的链接显示为垂直的项目符号列表，无论我如何设计它们？

我使用此代码创建响应链接（即，当查看器位于链接到的页面上时突出显示）：

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

然而，我出于某种原因创建的导航栏将链接构造为垂直列表。我是否遗漏了一些明显的东西，或者这是一个浏览器侧的小故障？我从上面的页面得到的代码列表是水平的，所以我很难理解为什么它会以这种方式格式化。奇怪的是，链接在悬停时不会改变颜色，所以我认为li a:hover样式也不起作用

这是我在（）上使用它的页面，这是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;
}

---

你的选择器错了

#navcontainer ul

不存在。相反，在

ul

元素上有一个id

navlist

这样做很有效：

查看

导航：

是如何从

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，但它不起作用，但当我粘贴您的代码时，它起作用了。你在身份证上还有什么变化吗？也许这是Kimodo的小毛病。不，这不是小毛病，你的CSS也有问题。请查看更改的详细信息，并将其与以前的代码进行比较。我在

li

元素的所有边上添加了一个值为10px的

padding

。这是否会将它从垂直列表更改为水平列表？我移除了填充物，但它仍然是水平的。不，填充物只会将元素彼此分离。您的水平对齐问题是由于使用了错误的选择器造成的。您使用的是不存在的

#navcontainer ul

，因此您的CSS从未应用于您的元素，浏览器将它们呈现为常规的非有序列表。我想我理解——但我想说的是，在您发布之前，我更改了选择器，没有任何更改，但当我对您的代码进行c/p时，它工作了。我想一定是科莫多的小毛病。谢谢你的帮助。当你还在看这个的时候，有没有可能让“导航”和链接在同一行？当我把它放在

之外时，它就在它上面的一行。

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