圆点出现在字体真棒汉堡菜单旁边

Question

在小屏幕上（＆lt; 720px）我有一个带有字体真棒图标的切换菜单。

昨天我注意到菜单前面出现了句号。我无法弄清楚这是从哪里来的。

有问题的点。

菜单代码（取自开发者工具。）

<ul id="toggle-menu">
    <li class="pullDown">
        <a href="#" id="pull">
            <i class="fa fa-bars fa-3x "></i>
        </a>
    </li>
</ul>

它出现在这一行的DOM中，即使删除了li中的所有元素。

<li class="pullDown"></li>

该网站为here

完整代码为here

提前致谢

Answer 1

在你的style.css中添加此代码

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

请参阅here了解其中的示例。

点的原因在于你将它作为列表元素添加 - 它不是一个完整的句号，必然只是无序列表中新元素的标记。 list-style-type:none删除了列表元素的任何样式。

Answer 2

这不是句号，它是列表项目的子弹。您正在使用带有<li>标记的列表，默认行为是将子弹放在<li>

内的任何内容之前

这里真正的答案是你的代码在语义上不是很正确。为什么首先在无序列表中放置一个图标？考虑另外两个选项......

1）只需将包含图标的<a>放在导航面前，然后将其留在导航面前 2）使用CSS样式将字体真棒图标合并到导航菜单本身的之前或之后的psuedo元素中。有关如何通过CSS添加图标的信息可以在字体真棒网站上找到。

Answer 3

您的切换菜单类应包含类似

的内容

list-style: none;