如何从ul中删除子弹？ [复制]答案

【问题标题】：How to remove bullets from ul? [duplicate]如何从ul中删除子弹？ [复制]
【发布时间】：2019-10-22 11:07:06
【问题描述】：

我已经阅读了多个具有相同问题的主题，并尝试按照所有说明进行操作，但我似乎无法从以下 <ul> <li> 片段中删除项目符号。

<div id="mobile-contact-bar-outer">
<ul>
<li><a data-rel="external" href="tel:+18885551212"><span class="fa-stack fa-3x"><i class="fa-fw fas fa-phone"></i>
<span class="screen-reader-text">Phone Number for calling</span></span></a></li>
<li><a data-rel="external" href="mailto:name@email.com"><span class="fa-stack fa-3x"><i class="fa-fw far fa-envelope"></i><span class="screen-reader-text">Email Address</span></span></a></li>
</ul>
</div>

我都添加了：

div#mobile-contact-bar-outer {
    list-style-type: none!important;
}

div#mobile-contact-bar {
    list-style-type: none!important;
}

两者都没有任何效果。我错过了什么？现场没有缓存。

【问题讨论】：

标签： css list bullet

【解决方案1】：

将list-style: none 添加到 UL 标签。 MDN参考

ul {
    list-style: none
}

【讨论】：

【解决方案2】：

下面是这样做的，你必须直接编辑 ul 标签，因为 list-style-type 在 div 上无效

div#mobile-contact-bar-outer ul {
  list-style-type: none;
}

div#mobile-contact-bar ul{
  list-style-type: none;
}

<div id="mobile-contact-bar-outer">
  <ul>
    <li><a data-rel="external" href="tel:+18885551212"><span class="fa-stack fa-3x"><i class="fa-fw fas fa-phone"></i>
<span class="screen-reader-text">Phone Number for calling</span></span></a></li>
    <li><a data-rel="external" href="mailto:name@email.com"><span class="fa-stack fa-3x"><i class="fa-fw far fa-envelope"></i><span class="screen-reader-text">Email Address</span></span></a></li>
  </ul>
</div>

【讨论】：

添加了 'div#mobile-contact-bar-outer ul { list-style-type: none; } div#mobile-contact-bar ul { 列表样式类型：无； }' 但没有变化。还有子弹！
你还有其他影响ul标签的样式吗？如果您单击“运行代码 sn-p”，您将无法看到仅使用这些 sn-ps 的代码的项目符号，这意味着必须有其他东西影响它
可能有，但添加 !important 应该消除这种可能性，对吧？对于任何样式，本机标签中没有其他调用。由于这仅在移动设备上调用，也许我应该添加“@media screen”？
是的 !important 应该，除非你在其他地方也使用了重要的影响它的地方。如果您检查开发工具中的元素，ul 标签上会显示什么样式？媒体查询不会覆盖 !important 标记，它们只会添加到适用设备/尺寸上的级联
这就是应用于 ul 的全部内容。边框：0；字体大小：100%；垂直对齐：基线；背景：透明；字体粗细：正常；边距：0；填充：0;

【解决方案3】：

您可以向元素添加一个类，例如

<ul class="newclass">

并将您的 list-style-type: none 添加到该元素，例如

ul.newclass{
list-style-type: none
}

这个新类将允许对这个单独的 ul 元素进行更多控制

或将类添加到您的 div

div#mobile-contact-bar-outer ul{
    list-style-type: none;
}

现在不需要重要标签了。

【讨论】：