如何删除引导下拉列表中的“标记”元素？

Question

我使用 bootstrap 在我的网站上制作了一个帐户选项下拉菜单，它使用您的帐户图片作为按钮。问题是由于某种原因，当它运行时，会创建一个 ::marker 元素，该元素在下拉列表旁边显示为黑色项目符号。我已将代码粘贴到一个片段中，当您运行它时，您可以看到完全相同的事情发生。我唯一的想法是使用一些 javascript 来删除这个元素，但我认为一定有更好的方法或我缺少的东西。我已经搜索了文档一段时间，尽管确实没有那么仔细。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<li class="nav-item dropdown">
  <a href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <img id="acc" alt="Your Profile Picture" class="pfp" src="https://lh3.googleusercontent.com/a-/AAuE7mAJhsrc2jWxXLM1-t503rYNBj128tuqFiQUgSVI2dQ=k-s48"></img>
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Profile</a>
    <a class="dropdown-item" href="#">Account settings</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Log out</a>
  </div>
</li>

Answer 1

您已覆盖

<li>

标签和

<ul>

标签并添加此 css：

li {
    list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<ul>
<li class="nav-item dropdown">
    <a href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <img id="acc" alt="Your Profile Picture" class="pfp" src="https://lh3.googleusercontent.com/a-/AAuE7mAJhsrc2jWxXLM1-t503rYNBj128tuqFiQUgSVI2dQ=k-s48"></img>
    </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Profile</a>
    <a class="dropdown-item" href="#">Account settings</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Log out</a>
  </div>
</li>
</ul>

Answer 2

这里的问题是，当我应该只使用“下拉菜单”时，我正在使用“导航项目下拉菜单”类，因为这不是导航栏的一部分。

Answer 3

标记元素由下拉项产生，该下拉项是

<li>

列表的

<ul>

元素。如果您想将其从列表中删除，请将其更改为其他内容，例如 a 和“.”。或者标记元素应该消失。