CSS:列表项之间的空格，向左浮动

Question

我是新来的，所以请耐心等待。

我使用 ul 和 li 制作了一个导航菜单：这是我的菜单 jsfiddle

我的问题是它在菜单之间有空格......和下拉菜单的

我很困惑代码的哪一部分在做这件事。我什至在我的 css 中添加了清除所有默认边距和填充。我猜是html？㞖 您通常如何删除不需要的间距？

* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
ul li {
background-color: black;
border: 1px solid white;
width: 110px;
height: 30px;
line-height: 30px;
text-align: center;
float: left;
}
ul li a {
color: white;
text-decoration: none;
}
ul li a:hover {
background-color: red;
display: block;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}

<link rel="stylesheet" type="text/css" href="style.css">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
</ul>
</li>
</ul>

Answer 1

这不是margin，它来自你的border: 1px solid white;

*{
margin:0;
padding:0;
}
ul{
list-style: none;
}
ul li{
background-color: black;
/* border: 1px solid white; --- Here it is */
width: 110px;
height: 30px;
line-height: 30px;
text-align: center;
float: left;
}
ul li a{
color: white;
text-decoration: none;
}
ul li a:hover{
background-color: red;
display: block;
}
ul li ul li {
display: none;
}
ul li:hover ul li{
display:block;
}

<link rel="stylesheet" type="text/css" href="style.css">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
</ul>
</li>
</ul>

JSFiddle

Answer 2

只有一个错误。 只需删除

`border: 1px solid white;`

并添加

`border: none;`

您的最终代码是

ul li{
background-color: black;
border: none;
width: 110px;
height: 30px;
line-height: 30px;
text-align: center;
float: left;
}

Answer 3

只是更新此 css 代码

ul li{
background-color: black;
width: 110px;
height: 30px;
line-height: 30px;
text-align: center;
float: left;
}

它将删除 ul li 之间的空格