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;
}
效果图:
以上代码有什么不对的地方请指出,谢谢!