在我对li没有进行高度设置的情况下.....
来源:2-2 页面顶部的开发(1)
慕码人1556588
2021-02-07 14:30:56
在我对li没有进行高度设置的情况下.....只是对top bar进行了高度32和行高32的设置,但是我的li自己就变成了32.8 还有nav-r的高度也变成了32.8,不知道是什么情况
相关代码:
header{
height: 150px;
}
header .top-bar{
height: 32px;background: #383D42;line-height: 32px;min-width: 1152px;
}
header .top-bar a{
color: #fff;font-size: 14px;
}
header .top-bar .nav{
float: left;
}
header .top-bar .nav>ul>li{
float: left;margin-right: 18px;
}
header .top-bar .nav>ul>li.have-list{
padding-right: 12px;position: relative;
}
header .top-bar .nav>ul>li.have-list .list{
position: absolute;top: 29px;left: 0;padding: 6px 8px;line-height: 18px;
background: #fff;display: none;white-space: nowrap;
}
header .top-bar .nav>ul>li.have-list:hover .list{
display: block;
}
相关代码:
<div class="top-bar">
<div class="center-wrap">
<div class="nav">
<ul>
<li>
<a href="">目的地</a>
</li>
<li>
<a href="">镜囊</a>
</li>
<li class="have-list">
<a href="#">社区</a>
<em class="arrow">
<i></i>
<b></b>
</em>
<div class="list listsq">
<ul>
<li><a href="#">旅行论坛</a></li>
<li><a href="#">旅行专栏</a></li>
<li><a href="#">旅行问答</a></li>
<li><a href="#">旅行生活分享平台</a></li>
<li><a href="#">JNE旅行生活美学</a></li>
<li><a href="#">Biu伴(原结伴同游)</a></li>
<li><a href="#">负责任的旅行</a></li>
<li><a href="#">特别策划</a></li>
</ul>
</div>
</li>
<li>
<a href="">行程助手</a>
</li>
<li class="have-list">
<a href="#">商城</a>
<em class="arrow">
<i></i>
<b></b>
</em>
<div class="list listsc">
<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>
<li><a href="#">游轮</a></li>
<li><a href="#">河轮</a></li>
<li><a href="#">私人定制</a></li>
<li><a href="#">欧洲铁路</a></li>
</ul>
</div>
</li>
<li class="have-list">
<a href="#">酒店·民宿</a>
<em class="arrow">
<i></i>
<b></b>
</em>
<div class="list listjdms">
<ul>
<li><a href="#">酒店</a></li>
<li><a href="#">爱彼迎</a></li>
<li><a href="#">华人旅馆</a></li>
</ul>
</div>
</li>
<li>
<a href="#">特价酒店</a>
</li>
</ul>
</div>
<div class="nav-r">
<a class="iconfont" href="#"></a>
<span>|</span>
<a class="iconfont" href="#"></a>
<a class="iconfont" href="#"></a>
<a class="iconfont" href="#"></a>
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</div>
</div>
2回答
好帮手慕张
2021-02-07
同学你好,问题解答如下:
1、老师测试同学的代码在谷歌浏览器li和nav-r都是32px
2、在火狐浏览器li和nav-r都是33px
3、li的高度是由内容撑起来的,由于浏览器对a标签的兼容问题,导致在不同浏览器显示不一样,a标签为行内块元素,默认自带间隙。
解决:可以给a标签转块,就没有这个问题了,如下:
祝学习愉快!
慕码人1556588
提问者
2021-02-07
发现一个问题 只要把fontsize设置给除过a标签以外的父元素 所有的元素高度就能保持一致 如果设置给a标签.没有设置高度的父元素的高度就会随子元素的高度变化. 这是什么情况
相似问题