在我对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="#">&#xe61e;</a>
<span>|</span>
<a class="iconfont" href="#">&#xe60a;</a>
<a class="iconfont" href="#">&#xe6b4;</a>
<a class="iconfont" href="#">&#xe622;</a>
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</div>
</div>


写回答

2回答

好帮手慕张

2021-02-07

同学你好,问题解答如下:

1、老师测试同学的代码在谷歌浏览器li和nav-r都是32px

http://img.mukewang.com/climg/601faae50943654701800096.jpghttp://img.mukewang.com/climg/601faaf0095e7b7802100084.jpg

2、在火狐浏览器li和nav-r都是33px

http://img.mukewang.com/climg/601fab0c097312b401440081.jpghttp://img.mukewang.com/climg/601fab17098c9b1a04330074.jpg

3、li的高度是由内容撑起来的,由于浏览器对a标签的兼容问题,导致在不同浏览器显示不一样,a标签为行内块元素,默认自带间隙。

解决:可以给a标签转块,就没有这个问题了,如下:

http://img.mukewang.com/climg/601fab2c09fa6dd202710092.jpg

​祝学习愉快!

0

慕码人1556588

提问者

2021-02-07

发现一个问题  只要把fontsize设置给除过a标签以外的父元素    所有的元素高度就能保持一致      如果设置给a标签.没有设置高度的父元素的高度就会随子元素的高度变化. 这是什么情况

0

0 学习 · 15276 问题

查看课程