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 命令对无序列表产生任何影响。

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>