为了实现下面这个简单的效果,可能是因为经验不足,这么简单的布局应该很快就能实现,可是我却被绊住了。
因为是在小程序中,所以习惯用flex布局,实现箭头居左,设置justify-content:flex-start即可,可是却不生效!因为父元素设置了
justify-content:center;为了实现文字居中,所以左箭头跟着居中了,无法实现居左的效果。想了很多办法,还是不能实现,最后想到了定位,把左箭头定位到左边!
源代码如下:
html结构
<view class="top">
<navigator url="#"></navigator>
<text>资质文件</text>
</view>
css代码如下:
.top{
margin:30rpx;
padding:20rpx;
border-bottom:1rpx solid #eee;
display:flex;
justify-content:center;
align-items:center;
position:relative;
}
.top navigator{
position:absolute;
top:20rpx;
left:0;
width:30rpx;
height:30rpx;
transform:rotate(225deg);
border-top:2px solid #999;
border-right:2px solid #999;
}
/* .top-nav::after{
content:'';
display:flex;
width:30rpx;
height:30rpx;
transform:rotate(225deg);
border-top:2px solid #999;
border-right:2px solid #999;
} */
.top text{
display:flex;
font-size:30rpx;
justify-content:center;
}
在这个过程中,学会了怎么使用css样式实现左箭头;
设置宽高,设置上边框和右边框,利用transform属性实现即可!左右上下都可实现,设置旋转度数即可!
也可以用伪类实现,需加上content:"";
虽然问题很小,但依然有收获!