如何让导航连接部分不被限制在1200px范围里?

如何让导航连接部分不被限制在1200px范围里?

由于设置了1200px的wrap,导致header的logo和nav在1980分辨率显示器全屏打开状态的时候都是处在中间部分的,后面作业也有这个要求,要求在保持1200px的宽度情况下,让logo和nav各顶住屏幕左右,我目前css和效果是这样的

.header{

background-color: #f7f7f7;

}

.header_wrap{

width: 1200px;

height: 80px;

margin: 0 auto;

position: relative;

z-index: 5;

}

.header_logo{

width: 160px;

height: 40px;

line-height: 40px;

font-size: 20px;

color: white;

text-indent: 50px;

background: url('../img/logo.png') left center no-repeat;

background-size: 40px 40px; 

position: absolute;

top: 50%;

margin-top: -20px;

left: 20px;

}


.header_nav{

position: absolute;

right: 20px;

height: 40px;

top: 50%;

margin-top: -20px;

}


.header_nav-item{

color: white;

font-size: 16px;

display: block;

height: 40px;

line-height: 40px;

float: left;

margin-left: 40px;

position: relative;

}

http://img1.sycdn.imooc.com/climg//58c1442500014f7519020120.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

你好,具体不清你编写的代码,如实现内部内容宽1200px, 里面有logo(居左)和导航(居右)的效果,思路如下:

  1.  内部内容宽设置1200px。

  2. logo 设置float:left;

  3. nav 导航设置float:right;

  4. nav 导航里面的每项在设置float:left.

  5. 其他样式,根据情况来调整。

希望对你有帮助,祝学习愉快。

  • 你好,我试着加了一下float,但是貌似由于设置position absolute,导致没有效果,我把代码贴出来了,如何可以让logo顶住左边,nav顶住右边呢?
    2017-03-09 20:03:58
  • 你好,这部分的实现,建议不使用position 定位,使用float、margin、padding等可以实现。如不清楚,可以把HTML代码也传上来,以便确定问题和建议。祝学习愉快。
    2017-03-11 08:42:42
  • 好吧,谢谢,不过这就很尴尬了,毕竟这部分我是模仿这个视频里的老师的写法来写的。。。 HTML部分在这里 <header class="header"> <div class="header_wrap"> <div class="header_logo">H5实战页面</div> <nav class="header_nav"> <a href="javascript:;" class="header_nav-item header_nav-item_status_active">实战课程</a> <a href="javascript:;" class="header_nav-item">商业案例</a> <a href="javascript:;" class="header_nav-item">课程体系</a> <a href="javascript:;" class="header_nav-item">集成环境</a> <a href="javascript:;" class="header_nav-item">云端学习</a> <a href="javascript:;" class="header_nav-item header_nav-item_custom_button">即刻学习</a> </nav> </div> </header>
    2017-03-11 21:31:11
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师