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

来源:3-3 header头部导航条制作

Sean流蘇線條3849092

2017-03-09 14:18:04

由于设置了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://climg.mukewang.com/58c1442500014f7519020120.jpg

写回答

1回答

小于飞飞

2017-03-09

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

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

  2. logo 设置float:left;

  3. nav 导航设置float:right;

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

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

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

0
hean流蘇線條3849092
h 非常感谢!
h017-03-16
共5条回复

0 学习 · 5760 问题

查看课程