左边LOGO和标题用lineheight 不能使文字居中
来源:5-6 作业题
钟大白
2019-07-15 13:35:44
nav{width: 100%;
height: 50px;
position: absolute;
line-height: 50px;
}
.nav-logo{
display:inline-block;
position: absolute;
left: 0;
line-height: 50px;
}
.nav-li{
position: absolute;
right: 0;
line-height: 50px;
}
.nav-li .nav-ul li a{
line-height: 50px;
color: white
}
.banner img{
width: 100%;
height: 637px
}<nav> <div class="nav-logo"> <img src="img/logo.png" alt=""> <span>H5实战页面</span> </div> <div class="nav-li"> <ul class="nav-ul"> <li><a href="#1">实战课程</a></li> <li><a href="#2">商业案例</a></li> <li><a href="#3">课程体系</a></li> <li><a href="#4">集成环境</a></li> <li><a href="#5">云端学习</a></li> <li class="nav-li-end"><a href="#">即刻学习</a></li> </ul> </div> </nav>
1回答
好帮手慕糖
2019-07-15
同学你好,1、使用通配符去除元素的内外边距,例:

2、右侧的li是呈垂直排列的,应该先给li设置浮动,使其显示在一行。当前li的文字谁垂直的哦,不过样式还需要在调整,比如去掉下划线等。

3、左右两部分的内容,不需要设置定位,使用浮动即可,例:

4、图片实现水平居中要结合vertical-align: middle;一起使用。因为图片与文字统一父级,文字也会受到影响,需要给文字呀添加vertical-align: middle;属性。
另,图片本身有点间距,可以给其父级设置font-size为0去掉。不过之后,需要单独设置下span的字体大小哦,例:

希望能帮助到你,欢迎采纳。
祝学习愉快!
相似问题