Question

我正在尝试使用无序列表创建基本导航栏，但出于某种原因，我无法让子弹消失。

我已经在谷歌搜索了一个解决方案，对我而言似乎它应该会起作用，但我想我可能会搞砸一些与ul风格无关的东西，这反过来又阻止了ul从应用的风格。

以下是相关的html：

<div id="nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="example.html">Examples</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>

这是CSS：

#nav ul
{
    list-style-type: none;
    position: absolute;
    top: 10px;
    right: 0;
    margin: 0;
    padding: 0;
}
#nav ul li
{
    float: left;
}
#nav ul li a
{
    display: inline;
    float: left;
    padding: 8px 5px 3px 5px;
    margin-right: 5px;
    background-color: #034a7f;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
#nav ul li a:hover
{
    padding-top: 12px;
    background-color: #075a97;
}

Answer 1

为了确定，我通常也将它应用于li：

#nav ul li
{
    list-style-type: none;
    float: left;
}

要检查的其他内容是为firefox使用firebug之类的工具，右键单击列表项并执行“检查元素”。从那里你可以看到实际应用于它的样式，它们来自哪些，哪些是最重要的等等。

更有可能的是，正在发生的事情（以及其他答案和评论）是你有一些其他的风格让子弹出现 - 这就是萤火虫真正帮助你的地方

Answer 2

我也没看到任何子弹。也许尝试完全刷新：CTRL + F5或CTRL + R. 你可以尝试这个css

#nav ul li{ list-style: none; }

Answer 3

有效。您可能有另一个规则取消#nav ul。您可以通过添加

来测试它

body #nav ul

Answer 4

这是我在使用CSS的水平菜单栏中使用的。我从来没有遇到任何问题。

    #nav {
    padding-bottom: XXpx;
    margin:0px auto;
    }
    #nav ul { list-style:none;
    padding: XXpx;
    margin: XXpx;
    }
    #nav ul li {
    float:left;
    }
    #nav span {
    position:absolute;
    left:-9999px;
    }

需要CSS帮助无序列表

4 个答案: