如何从嵌套在 Div 中的无序列表中删除项目符号？答案

【问题标题】：How to remove bullets from Unordered list nested in Div's?如何从嵌套在 Div 中的无序列表中删除项目符号？
【发布时间】：2019-03-14 02:46:18
【问题描述】：

我不明白为什么我的代码不起作用。我想移除我的 ul 锚上的子弹。但是“ul {list-style: none;} 不起作用。

这是我的代码：

<div class="nav-wrapper">
    <div class="logo">
        <!-- <a href="/">Logo</a> -->
    </div>
    <div class="main-page-links">
        <ul>
            <li><a href="">MENU</a></li>
            <li><a href="">WEEKLY EVENTS</a></li>
            <li><a href="">FILLER</a></li>
            <li><a href="">FILLER</a></li>
        </ul>
    </div>
    <div class="gallery">
        <img src="" alt="image galleries">
    </div>

</div>

这是 Css：

*{
margin: 0;
padding: 0;
box-sizing: border-box;}

body{
    height: 100%;
}

.nav-wrapper{
    display: grid;
    grid-template-columns: repeat(6, 1);
    grid-template-rows: 8;

height: 100px;
width: 900px;}

ul { list-style: none;}  /* I thought this would do it */

【问题讨论】：

我没有看到任何项目符号！，这一定是更大代码的一部分，项目符号可能来自那里..

标签： html css list bullet

【解决方案1】：

可能你的浏览器被缓存了，尝试在你正在使用的页面上使用ctrl + shift + R，你的代码在这里没问题

codepen

【讨论】：

Idk 我已经这样做了，遗憾的是没有改变任何事情，但还是谢谢。

【解决方案2】：

我尝试了列表样式：无，不显示项目符号。

*{
margin: 0;
padding: 0;
box-sizing: border-box;}

body{
    height: 100%;
}

.nav-wrapper{
    display: grid;
    grid-template-columns: repeat(6, 1);
    grid-template-rows: 8;

height: 100px;
width: 900px;}

ul { list-style: none;}  /* I thought this would do it */

<div class="nav-wrapper">
    <div class="logo">
        <!-- <a href="/">Logo</a> -->
    </div>
    <div class="main-page-links">
        <ul>
            <li><a href="">MENU</a></li>
            <li><a href="">WEEKLY EVENTS</a></li>
            <li><a href="">FILLER</a></li>
            <li><a href="">FILLER</a></li>
        </ul>
    </div>
    <div class="gallery">
        <img src="" alt="image galleries">
    </div>

</div>

【讨论】：

因为我在 CodePen 中运行它并且子弹被隐藏了，但在 Firefox 和 chrome 中它们仍然存在......

【解决方案3】：

尝试执行它

列表样式类型：无；

它应该可以完美运行。

【讨论】：