开发者社区> 问答> 正文

对单行的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呢

展开
收起
杨冬芳 2016-05-31 15:31:06 2412 0
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
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载