I've made an account options dropdown on my site using bootstrap, it uses your account picture as a button. The problem is for some reason when it's run a ::marker element is created which shows up as a black bullet next to the dropdown. I've pasted my code into a snippet and when you run it you can see the exact same thing happens. My only idea is to use some javascript to remove this element but I figure there must be a better way or something that I'm missing. I've searched the documentation for a little while albeit admittedly not that closely.
我已经用Bootstrap在我的网站上做了一个帐户选项下拉列表,它使用您的帐户图片作为按钮。问题是,当它运行时,会创建一个::Marker元素,该元素在下拉列表旁边显示为一个黑色的项目符号。我已经将我的代码粘贴到一个代码片段中,当您运行它时,您可以看到完全相同的事情发生。我唯一的想法是使用一些Java脚本来删除这个元素,但我想一定有更好的方法或我遗漏的东西。我已经搜索了一段时间的文档,尽管不可否认并不是那么仔细。
<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>
更多回答
优秀答案推荐
You have cover <li>
tag with <ul>
tag and add this css:
你有一个cover
tag和
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>
The problem here was that I was using the "nav-item dropdown" class when I should be using just "dropdown" since this wasn't a part of a navbar.
这里的问题是,我使用了“nav-item”类,而我应该只使用““,因为这不是导航栏的一部分。
The marker element resulted from the dropdown item being a <li>
element of <ul>
list. If you want to take it out of the list, change it to something else like a and the "." or marker element should be gone.
标记元素产生于下拉项是
列表的
- 元素。如果您想将其从列表中删除,请将其更改为其他名称,如a和the。或者标记元素应该消失。
更多回答
我是一名优秀的程序员,十分优秀!