关于line-height

问题描述：为啥我这里line-height是设置36px而不是72px才居中啊？？

问题描述：我希望将空白出也变成可以点击的样子，但是我尝试将li标签设置宽高的时候失败了，应该怎么改呢？

Star3327752 2022-04-14

源自：前端综合案例-仿慕课首页 2-3 课程导航栏

收起

1回答

好帮手慕小尤 2022-04-15 11:12:01

同学你好，1、建议同学查看.item-box在浏览器中是否存在内外边距，有时该内容也会影响布局。

2、测试同学代码未复现同学问题，建议同学以复制粘贴的方式，将html与代码中所涉及到的css反馈到问答区，便于老师定位问题。如下所示：

祝学习愉快！

收起回答

提问者 Star3327752 #1

#header{
    height: 72px;
    border-bottom: 1px solid #ccc;
}
.nav-box{
    margin: 0 auto;
    width: 1000px;
}
.nav-box h1{
    width: 126px;
    height: 72px;
    background-image:url(../images/logo.png);
    background-size: 126px ;/*直接调整背景的宽高*/
}
.nav-box h1 a{
    display: block;
    width: 126px;
    height: 72px;
    font-size: 0;
}
.item-box{
    height: 72px;
    line-height: 72px;
    margin-left: 20px;
}
.item-box li{
    float: left;
    padding: 0 16px;
}
.item-box img{
    position: absolute;
    left: 508px;
    top: 18px;
    width: 13px;
}

<!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>慕课首页</title>
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/common.css">
    <link rel="stylesheet" href="./CSS/01-header.css">
</head>
<body>
    <div id="header" class="bgfff">
        <div class="nav-box">
            <h1 class="fl">
                <a href="index.html">logo</a>
            </h1>
            <ul class="item-box fl">
                <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>
                <img src="./images/new.png" alt="">
            </ul>
            <div class="fl">搜索框</div>
            <div class="fr">登录/注册</div>
        </div>
    </div>
</body>
</html>

想实现鼠标放在免费课那80*72像素的空间里面都可以实现点击链接，而不仅仅是放在免费课上才能点击链接