无序列表需要 CSS 帮助答案

【问题标题】：need CSS help for unordered list无序列表需要 CSS 帮助
【发布时间】：2011-03-30 03:27:42
【问题描述】：

我正在尝试使用无序列表创建一个基本的导航栏，但由于某种原因，我无法让项目符号消失。

我已经在 Google 上搜索了一个解决方案，对我来说它似乎应该可以工作，但我认为我可能会搞砸与 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;
}

【问题讨论】：

我没有看到任何要点：jsfiddle.net/BoltClock/5Tnxs您正在测试哪些浏览器？
Well Groovetrains 的答案似乎解决了这个问题，但我仍然很困惑为什么它最初不起作用。我刚刚在 Chrome 10 中尝试过，但仍然遇到同样的问题。我也在 Mac 上，如果这有什么不同的话。
好的，我现在有萤火虫，希望我以前知道这一点。这是一个很棒的插件。

标签： html css css-selectors

【解决方案1】：

为了确定，我通常也将其应用于lis：

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

要检查的其他事情是使用firebug 之类的工具用于firefox，然后右键单击列表项并执行“检查元素”。从那里您可以看到实际应用到它的样式以及它们的来源、哪些样式覆盖了哪些样式等等。

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

【讨论】：

好吧，将样式添加到 li 似乎可以解决问题，但我仍然想知道为什么它以前不起作用。
@RyanE 好吧，我很乐意为您提供帮助，希望您能接受我的回答。这确实是 firebug 将帮助您跟踪正在应用的样式及其原因的地方。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

它有效。您可能有另一条取消#nav ul 的规则。您可能可以通过添加来测试它

body #nav ul

【讨论】：

【解决方案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;
    }

【讨论】：