写这篇博客之前,首先要声明一下,我是一个新人,很新很新的新人,才学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;
}
这是我的html:
<!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;
}
中的代码,删除font-size这句话,然后将这句话放在.menu{}中保证字体大小不变
a{
color: black;
text-decoration: none;
}
.menu {
background-color: blue;
width: 500px;
height: 40px;
font-size: 10px;
}
再来查看html
可以看见这个缝隙消失了。我想大概就是font-size的使用的原因吧,但具体是为什么并不清楚,毕竟我也只是一名新人,接下来如果有前辈肯赐教,实在万分感谢