padding-left: 20%;position: relative; left: 50%;

2019独角兽企业重金招聘Python工程师标准>>>

nav的padding-left: 20%; ——%：父元素宽的20%

eg:

header{
	width: 100%;
	background: #fff;
	height: 60px;

}
header .banner-left,header nav,header .banner-right{
	float: left;
}
header .banner-left{
	width: 20%;
	text-align: center;
}
header nav{
	width: 30%;
	padding-left: 20%;
}

 

<header>
            <div class="banner-left">
                <h1>新世界</h1>
            </div>
            <nav>
            
                <ul>
                    <li>首页</li>
                    <li>最新活动</li>
                    <li>项目介绍</li>
                    <li>爱心社区</li>
                    <li>关于我们</li>
                    <li class="move"></li>
                     <!-- move作用：做特效 -->
                </ul>
            </nav>
            <div class="banner-right">
                <span>登录</span>
                <div class="move"></div>
            </div>
            
        </header>

____________________________________________________________________________________

nav的  position: relative;  left: 50%;——left相对于包含块的宽度。

/*相对于自己的位置又挪了20%，left %是父元素的宽*/

其后的登陆元素，还在原位置。

header{
	width: 100%;
	background: #fff;
	height: 60px;

}
header .banner-left,header nav,header .banner-right{
	float: left;
}
header .banner-left{
	width: 20%;
	text-align: center;
}
header nav{
	width: 30%;
	position: relative;
	left: 50%;
}

 

转载于:https://my.oschina.net/u/2444023/blog/736943