如何让导航连接部分不被限制在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;
}

1回答
你好,具体不清你编写的代码,如实现内部内容宽1200px, 里面有logo(居左)和导航(居右)的效果,思路如下:
内部内容宽设置1200px。
logo 设置float:left;
nav 导航设置float:right;
nav 导航里面的每项在设置float:left.
其他样式,根据情况来调整。
希望对你有帮助,祝学习愉快。
相似问题