对单行的ul设置line-height，但其实际高度却被撑大了

发布于
2015-07-22

<!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呢

css

阅读 8.2k

5 个回答

得票最新