左边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的字体大小哦,例:
希望能帮助到你,欢迎采纳。
祝学习愉快!
相似问题