以下是我的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="xiaomi.css">
</head>
<body>
<!-- 小米商城头部分布 -->
<div class="header">
<div class="hd-center w">
<ul>
<li><a href=" #"> 小米商城 </a></li>
<li><a href=" #"> MIUI</a></li>
<li><a href=" #"> IoT</a></li>
<li><a href=" #"> 云服务</a></li>
<li><a href=" #"> 天星数科</a></li>
<li><a href=" #"> 有品</a></li>
<li><a href=" #"> 小爱开放平台</a></li>
<li><a href=" #"> 企业团购</a></li>
<li><a href=" #"> 资质证照</a></li>
<li><a href=" #"> 协议规则</a></li>
<li><a href=" #"> 下载app</a></li>
<li><a href=" #"> Select Location</a></li>
</ul>
<div class="hd-center2">
<ul>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">消息通知</a></li>
</ul>
</div>
</div>
</div>
<!-- 搜索模块 -->
<!-- <div class="search w">
<ul>
<li><a href=""> Xiaomi手机</a></li>
<li><a href=""> Redmi 红米</a></li>
<li><a href=""> 电视</a></li>
<li><a href=""> 笔记本</a></li>
<li><a href=""> 平板</a></li>
<li><a href=""> 家电</a></li>
<li><a href=""> 路由器</a></li>
<li><a href=""> 服务</a></li>
<li><a href=""> 社区</a></li>
</ul>
</div> -->
</body>
</html>
一下是我的css代码
* {
/* 先清除默认的内外边距 */
margin: 0px;
padding: 0px;
}
a {
/* 将网页中所有的a链接默认的下划线设置为没有 */
text-decoration: none;
}
li {
/* 去除列表前面的小圆点 */
list-style: none;
}
.w {
width: 1226px;
margin: 0px auto;
}
.header {
height: 40px;
background-color: #333333;
}
.hd-center {
height: 40px;
background-color: red;
line-height: 40px;
}
.hd-center>ul {
float: left;
}
.hd-center>ul>li {
float: left;
}
.hd-center>ul>li>a {
font-size: 12px;
color: #B0B0B0;
}
/* .search {
margin-top: 10px;
height: 100px;
background-color: pink;
background-image: url(../../images/logo-mi2.png);
background-repeat: no-repeat;
background-size: 56px 56px;
background-position: 0px center ;
}
.search>ul {
float: left;
margin-left: 234px;
background-color: red;
}
.search>ul>li {
float: left;
}
.search>ul>li>a {
font-size: 16px;
color: #333333;
padding: 0px 15px;
line-height: 100px;
} */
当我给.search>ul>li>a设置了font-size 为什么li的高度会变成41px，会被撑大，我不是设置行高为40px吗
请看图片
这是没有设置font-size为12px的样子
把a改成display：block就恢复正常了为什么
