无法使用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命令对无序列表有任何影响。

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>

Answer 2

取自this post：

  

您可以通过在父元素（通常是a）的CSS上将list-style-type设置为none来删除项目符号，例如：

ul {
  list-style-type: none;
}

     

如果还希望删除缩进，则可能还需要在其中添加padding：0和margin：0。

     

有关列表格式设置技巧的详细介绍，请参见Listutorial。

希望这会有所帮助！

Answer 3

只需添加另一个CSS类：

ul {
  list-style: none;
{

Answer 4

如果添加，您应该获得所需的结果

display: block;
position: relative;

如果没有帮助-请在jsfiddle或类似资源中创建一些沙箱并提供链接，让我们看看有什么问题。

如果您需要设置 li 和 a 元素的样式，则还需要编写，例如：

.navbar li{
list-style: none;
padding: 1vw 2%;
}
.navbar li a{
text-decoration: none;
}