对单行的ul设置line-height，其实际高度却被撑大了 吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
ul{
line-height: 54px;
font-size: 0;
}
ul li{
display: inline-block;
font-size: 16px;
margin: 0 18px;
}
nav{
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<nav>
<ul>
<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>
</nav>
</body>
</html>li因继承了ul的line-height:54px，所以高度是54px，但ul却是被撑大到60px或61px呢
展开
收起
1
条回答
写回答
写回答
-
首先我不知道你的全局样式写了没有，如果没有的话最好写一个，不然会出很多BUG。然后我没看见你这边有设置li的高度。line-height是行高，也可以理解为行间距，并不是你line-height有多高你的li就会有多高，li在自适应的情况下是字体的高度加上padding的高度再加上line-height来自行判断高度的。我建议你干脆不要用Line-height,直接给li一个固定高度，高度为两条虚线间的距离，然后给个display:inline-block,vertical-align:bottom;应该就能实现了“答案来源于网络，供您参考” 希望以上信息可以帮到您！
2019-09-25 21:00:11赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
