摆脱 <ul> 的要点答案

【问题标题】：Getting rid of bullet points from <ul>摆脱 <ul> 的要点
【发布时间】：2012-01-07 13:20:13
【问题描述】：

我有以下列表：

 <ul id="otis">
 <li>Benz</li>
 <li>Other Benz</li>
 <li>Other Other Benz</li>
 </ul>

我想摆脱子弹所以我尝试了：

 ul#otis {
 list-style-type: none;
 }

但这并没有奏效。从显示的列表中删除项目符号的正确方法是什么？

【问题讨论】：

您当前的 HTML/CSS 在 FF (JSFiddle) 中对我来说可以正常工作。您使用的是哪个浏览器？看看list-style: none 是否可以代替。
我在所有浏览器、mac 和 windows 操作系统上都试过这个。我正在使用 html5 文档类型...

标签： html html-lists

【解决方案1】：

假设这不起作用，您可能希望将基于 id 的选择器与 li 结合起来，以便将 css 应用于 li 元素：

#otis li {
    list-style-type: none;
}

参考：

list-style-type at the Mozilla Developer Center。

【讨论】：

ul#otis和#otis有什么区别？
其实一个都没有，我，嗯，完全看不到你用的id选择器。哎呀……对不起！
在该链接的哪个位置我可以找到它需要在li 上定义？
前两句：“list-style-type CSS 属性指定列表项元素的外观。因为它是唯一默认为 display:list-item 的元素”（尽管它确实允许它可以应用于任何具有display 属性的元素）。尽管他们确实在 ol 元素下定义了它，但对于他们的示例。就我个人而言，我总是默认为列表 (ul/ol) 和 li 元素定义它。

【解决方案2】：

试试这个，在 Chrome/Safari 上测试

ul {
 list-style: none;
}

【讨论】：

【解决方案3】：

肯定还有别的。

因为：

   ul#otis {
     list-style-type: none;
   }

应该可以工作。

也许有一些 CSS 规则会覆盖它。

使用您的 DOM 检查器找出答案。

【讨论】：

【解决方案4】：

放

<style type="text/css">
 ul#otis {
     list-style-type: none;
   }
</style>

在列表之前立即对其进行测试。或者

<ul style="list-style-type: none;">

【讨论】：

【解决方案5】：

我自己也遇到了同样令人恼火的问题，因为脚本没有注意到我的样式表。于是我写了：

<ul style="list-style-type: none;">

那没有用。所以，此外，我写道：

<li style="list-style-type: none;">

瞧！成功了！

【讨论】：

【解决方案6】：

我遇到了同样的问题，我最终解决它的方式是这样的：

ul, li{
    list-style:none;
    list-style-type:none;
}

也许这有点极端，但当我这样做时，它对我有用。

希望这有帮助

【讨论】：

【解决方案7】：

我遇到了同样的问题。

解决方案是通过背景图片添加项目符号，而不是通过列表样式类型。快速“背景：无”，鲍勃是你的叔叔！

【讨论】：

【解决方案8】：

对于内联样式表试试这个代码

<ul style="list-style-type: none;">
    <li>Try This</li>
    </ul>

【讨论】：

【解决方案9】：

以下代码

#menu li{
  list-style-type: none;
}

<ul id="menu">
    <li>Root node 1</li>
    <li>Root node 2</li>
</ul>

将产生这个输出：

【讨论】：

【解决方案10】：

你的代码：

ul#otis {
    list-style-type: none;
}

我的建议：

#otis {
    list-style-type: none;

}

在 CSS 中你只需要使用 #id 而不是 element#id。此处提供了更多有用的提示： w3schools

【讨论】：

【解决方案11】：

要从无序列表中删除项目符号，您可以使用：

list-style: none;

你也可以使用：

list-style-type: none;

两种方法都可以，但第一种方法是获得相同结果的更短的方法。

【讨论】：

【解决方案12】：

要从 UL 中删除项目符号，您可以简单地使用 list-style: none; 或 list-style-type: none; 如果仍然无效，那么我猜有是优先CSS的问题。可能已经在全球范围内定义了 UL。所以最好的方法是向那个特定的 UL 添加一个类/ID 并在那里添加你的 CSS。希望它会奏效。

【讨论】：

【解决方案13】：

这很完美 HTML

<ul id="top-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Process</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

CSS

#top-list{
  list-style-type: none;
  list-style: none;}

【讨论】：

【解决方案14】：

在 chrome 中，您可以使用

ul {
 list-style: none;
}

【讨论】：