flex右對齊佈局,通常做導航欄比較多!
阿新 • • 發佈:2018-12-28
flex右對齊佈局
html程式碼
<div class="row nav_box"> <div class="qx_1"><a href="">網站首頁</a></div> <div class="qx_1"><a href="">產品中心</a></div> <div class="qx_1"><a href="">走進黔鑫</a></div> <div class="qx_1"><a href="">新聞中心</a></div> <div class="qx_1"><a href="">案例中心</a></div> <div class="qx_1"><a href="">聯絡我們</a></div> <div class="move"></div> </div>
CSS程式碼
.nav_box{
height: 60px;
position: relative;
top: calc(50% - 30px);
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.qx_1{
display: flex;
line-height: 60px;
margin:0 5px 0 5px;
padding: 0 10px 0 10px;
font-size: 14px;
position: relative;
}
效果圖:
以上程式碼有什麼不對的地方請指出,謝謝!