Question

I have a navigation bar but the problem is i don't know why dots are coming in my nav bar i tried multiple ways but i didn't find the reason for it i don't want those dots to be appear in my nav bar i have uploaded the image also please CLICKHERE to see it and help me, Thanks in advance. here is my Stylesheet code for my nav bar.

ul{
margin:0px;
padding:100px;
padding-left:500px;

}
ul li a{
    text-decoration:none;
    color:white;
    display:block;
}
ul li{
    float:left; 
    width:200px;
    height:40px;
    background-color:black;
    font-size:20px;
    line-height:40px;
    text-align:center;
    border:1px solid aqua;
}
ul li a:hover{
    background-color:red;
}
HTML Code:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Scripts/StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <div style="background-color:black; height:50px;">
        <h2 style ="color:white; font-size:40px; font-family:'Agency FB';">Look up on ZipCodes</h2>
    </div>
    <div>
        <ul>
            <li><a href="#">Zipcode by City</a></li>
            <li><a href="#">City by Zipcode</a></li>
        </ul>
    </div>
</body>
</html>

Answer 1

ul标记的列表默认样式为圈（点），因此要删除它添加list-style-type: none;

ul{
   list-style-type: none;

}

Answer 2

这是因为它是一个列表。因此，子弹点将出现在李本身的内容旁边。

为防止这种情况发生，您可以添加{list-style-type: none;}，这将删除项目符号。

ul li {
 list-style-type: none;
}

Answer 3

需要将list-style-type:none;添加到您的ul

ul{
    margin:0px;
    padding:100px;
    padding-left:500px;
    list-style-type:none;
}

Answer 4

只需将list-style: none;放在ul上即可删除所有子弹列表（点）

检查下面的代码段，希望有帮助：）

    ul {
        margin: 0px;
        padding: 100px;
        padding-left: 500px;
        list-style: none; /* Remove list bullets */
    }

    ul li a {
        text-decoration: none;
        color: white;
        display: block;
    }

    ul li {
        float: left;
        width: 200px;
        height: 40px;
        background-color: black;
        font-size: 20px;
        line-height: 40px;
        text-align: center;
        border: 1px solid aqua;
    }

    ul li a:hover {
        background-color: red;
    }

<div style="background-color:black; height:50px;">
    <h2 style="color:white; font-size:40px; font-family:'Agency FB';">Look up on ZipCodes</h2>
</div>
    
<div>
    <ul>
        <li><a href="#">Zipcode by City</a></li>
        <li><a href="#">City by Zipcode</a></li>
    </ul>
</div

级联样式表导航栏

4 个答案: