写这篇博客之前，首先要声明一下，我是一个新人，很新很新的新人，才学CSS没多久，并不精通。如果有什么写得不对的地方还希望前辈能够帮忙指出。当然今天我解决的这个问题困扰了我一段时间，我一定要把这些点点滴滴记下来。虽然说是解决了问题，但也只是在我写的程序里面暂时性的解决，因为我并不知道具体的原因，以后如果遇见同样的问题还是会比较麻烦，所以还请前辈们多多指教了。
接下来就简单地进行描述：
这是我的CSS：
* {
margin: 0 auto ;
padding: 0;
}
a{
color: black;
text-decoration: none;
font-size: 10px;
}
.menu {
background-color: blue;
width: 500px;
height: 40px;
}
.menu ul li {
list-style-type: none;
text-align: center;
line-height: 40px;
float: left;
width: 80px;
height: 40px;
}
.menu ul li ul li {
list-style-type: none;
background-color: #FF0000;
width: 80px;
height: 40px;
/*display: none;*/
}
.menu ul li:hover ul li {
display: block;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="cssStyle.css">
<title>html</title>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">教材</a>
<ul>
<li><a href="#">语文</a></li>
<li><a href="#">数学</a></li>
<li><a href="#">英语</a></li>
<li><a href="#">计算机</a></li>
</ul>
</li>
</div>
</body>
</html>打开这个html后可以发现在教材和语文之间出现了明显的空隙
接下来对CSS少做修改，至修改
a{
color: black;
text-decoration: none;
font-size: 10px;
}a{
color: black;
text-decoration: none;
}.menu {
background-color: blue;
width: 500px;
height: 40px;
font-size: 10px;
}可以看见这个缝隙消失了。我想大概就是font-size的使用的原因吧，但具体是为什么并不清楚，毕竟我也只是一名新人，接下来如果有前辈肯赐教，实在万分感谢
2955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
