解决css中li下面的a标签无法范围点击的问题解决css中li下面的a标签无法范围点击的问题原先的css代码为问题出

编写导航栏代码时出现一个问题 点击a标签时可以正常出现点击样式,但是点击a标签上方时,则无法跳转链接.

原先的css代码为

.nav-ul li a {
    color: #b0b0b0;
    height: 35px;/*此时高度是无效的*/
    line-height: 35px;
}

问题出在了或略了a标签为行内元素即使添加了跟导航栏同样的高度,也不会生效.

解决思路:将a标签转换为行内块元素,此时a标签拥有和块元素相同的特性可以设置高度和宽度,将高度设置为导航栏的高度,就可以实现点击a标签上方的空白,也可以实现跳转的功能

改变后的代码为

.nav-ul li a {
    display: inline-block;/*转换为行内块元素*/
    color: #b0b0b0;
    height: 35px;
    line-height: 35px;
}