导航栏中我的锚点中的点

Question

做一些基本的html / css。我正在制作一个带浮动链接的基本导航栏。在开始工作之后我遇到了这个问题，到目前为止还没有找到解决方案。

我的链接中包含这些点。如图所示。

我的代码很简单：

HTML

            <div id="nav-wrapper">
                <div id="navbar">
                    <ul id="nav">
                        <li><a href="">Home</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Blog</a></li>
                        <li><a href="">Contact Us</a></li>
                    </ul>
                </div>
            </div>

和CSS

#nav-wrapper {
background-color: black;
height: 40px;
width: 100%;
border-top: 2px solid gray;
border-radius: 0 0 5px 5px;
}

#navbar {
}

ul#nav li { 
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
}

ul#nav * a {
width: 25px;
margin: 0 10px 10px 0;
}

我的问题是造成这些点的原因是什么？如果我在列表中添加更多单词/链接或者删除除一个项目以外的所有内容，为什么它们不会出现？这很古怪。我一定会错过一些非常令人尴尬的事情，因为这看起来很奇怪。

Answer 1

您想使用代码 - list-style：none;

所以你的代码看起来像

ul#nav li { 
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
list-style: none;
}

Answer 2

添加此样式：

list-style-type: none;

到这个选择器：

ul#nav li

Answer 3

修改ul#nav li的声明以包含此属性

list-style:none;

http://jsfiddle.net/bcDDk/