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

nav的padding-left: 20%; ——%:父元素寬的20%css

eg:html

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>

____________________________________________________________________________________spa

nav的  position: relative;  left: 50%;——left相對於包含塊的寬度。code

/*相對於本身的位置又挪了20%,left %是父元素的寬*/htm

其後的登錄元素,還在原位置。it

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%;
}
相關文章
相關標籤/搜索