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%; }