从无序列表中删除项目符号答案

【问题标题】：Removing bullets from unordered list从无序列表中删除项目符号
【发布时间】：2015-10-12 16:20:30
【问题描述】：

编辑

我正在开发的网站的 html 和 css 可以在http://http://new.oranaschool.com/找到

/编辑

我正在尝试删除顶部水平菜单（主页...联系人）中显示的项目符号。我已经尝试了Removing "bullets" from unordered list <ul> 中给出的建议，但子弹仍然存在。

有人可以看看 CSS 并告诉我需要在哪个 CSS 类中添加什么吗？这已经让我发疯了几个小时了。

【问题讨论】：

你只需要使用 list-style: none;
- ...这将删除项目符号。
你没有提供任何 CSS...
ul li { list-style-type:none; }
@All 你能看看我发布的网址吗？正如您将看到的，有许多 CSS 类在起作用。向 .navigation ul.sf-menu 添加建议并没有改善任何事情。
@TheEdge 您的帖子中没有 URL..除了一个 SO 问题。

标签： html css

【解决方案1】：

你可以试试这个

<html>
<head>
<style type="text/css">
div.ui-menu li {
    list-style:none;

}
ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}
li
{
   display:inline;
    padding-left:14px;
}
</style>
</head>

<body>

<div class="ui-menu">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>

</body>

</html>

【讨论】：

【解决方案2】：

请看小提琴

https://jsfiddle.net/psgou7bt/2/

HTML

  <ul class="no-bullets">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    </ul>

CSS

  .no-bullets, .no-bullets li {
        list-style-type:none;

    }

如果这对您不起作用，那么您的代码中存在一些冲突

【讨论】：

【解决方案3】：

从这里删除背景图像

.navigation ul.sf-menu > li:before {
     background: url(../images/menu_bull.png) 0 0 no-repeat; /** remove this */
}

如果您不想编辑原始代码，请添加

.navigation ul.sf-menu > li:before {
         background: url('');
    }

【讨论】：

【解决方案4】：

您可以通过在元素的 CSS 上使用 list-style-type 到 none 来删除项目符号，例如：

ul
{
    list-style-type: none;
}

希望这会对您有所帮助。 :)

【讨论】：

你能看看我发布的网址吗？正如您将看到的，有许多 CSS 类在起作用。向 .navigation ul.sf-menu 添加建议并没有改善任何事情。
你只需在我刚刚发布的css中添加代码，试一试。
这将适用于所有无序列表。我只希望它用于顶部菜单。
然后给它一些特定的类然后你可以将它用作 .abc ul{list-style:none;}

【解决方案5】：

我在网站上发现了您面临的问题。您可以使用下面的 CSS 删除项目符号。

.navigation ul.sf-menu > li::before {
    background: none !important;
}

或者从您的样式表中完全删除background。

【讨论】：

你能看看我贴的网址吗？正如您将看到的，有许多 CSS 类在起作用。向 .navigation ul.sf-menu 添加建议并没有改善任何事情。
@TheEdge，至少添加您的 HTML。否则，我们的任何解决方案都可能无法在您的 html 上运行。
HTML 可以在发布的 URL 即new.oranaschool.com 中找到，然后查看源代码