html - 无法使用 CSS 将无序列表设置为导航栏

Question

.navbar {
    background-color: 595959;
    color: #ffffff;
    list-style: none;
}

<ul class = "navbar"> 
    <li><a href = "#">Home</a></li>
    <li><a href = "#">About Us</a></li>
    <li><a href = "#">Our Projects</a></li>
    <li><a href = "#">Contact Us</a></li>
    <li><a href = "#">Donate</a></li>
</ul>

无论我在 CSS 样式表中对导航栏进行样式设置，都没有任何变化。在上面的代码中，我尝试使用列表样式删除项目符号，但没有任何变化，如图所示。似乎没有 css 命令对无序列表有任何影响。

标签： htmlcssnavbar

Answer 1

在这里，我们请像这样点他以归档样式以删除项目符号使用list-style-type:none;，并且您不想使用 flex 属性，您可以简单地使用.navbar > li{display:inline-block;}

.navbar {
    background-color: 595959;
    color: #ffffff;
    list-style: none;
    display:block;
}

.navbar{display:flex; list-style-type:none;}
.navbar li{display:block; padding:15px;   border:1px solid #000;  color:#fff; }
.navbar li a{width:100%; text-align:center; color:#000;  text-decoration:none; }
.navbar2P{list-style-type:none;}
.navbar2 li{display:inline-block; }
.navbar2 li a{display:block; border:1px solid #000; color:#000; padding:15px 5px; text-decoration:none; }

<ul class = "navbar" > 
    <li><a href = "#">Home</a></li>
    <li><a href = "#">About Us</a></li>
    <li><a href = "#">Our Projects</a></li>
    <li><a href = "#">Contact Us</a></li>
    <li><a href = "#">Donate</a></li>
</ul>

<ul class = "navbar2" > 
    <li><a href = "#">Home</a></li>
    <li><a href = "#">About Us</a></li>
    <li><a href = "#">Our Projects</a></li>
    <li><a href = "#">Contact Us</a></li>
    <li><a href = "#">Donate</a></li>
</ul>