先上效果图
可以去尝试一下,像第二行这样的默认大小的button肯定是放不下的
,要想放到一行显示,就得调整button大小
wxml:
<view class = 'categoryBotton'>
<button class = 'bottonSize'>全部</button>
<button class = 'bottonSize'>生活用品</button>
<button class = 'bottonSize'>电子产品</button>
<button class = 'bottonSize'>体育用品</button>
<button class = 'bottonSize'>其他</button>
</view>
wxss:
.categoryBotton{
display: flex;
justify-content: space-around;
}
.bottonSize{
margin-top: 10rpx; ;与上面隔开点距离
width: 145rpx;
height: 60rpx; ;修改为自己所需大小
font-size: 22rpx; ;修改字体大小可以使文字全部显示
vertical-align:middle;
text-align: center; ;文字居中对齐
line-height: 60rpx; ;如果上面的样式还不能满足对齐的要求的话,可试试line-height,一般跟height差不多大就可以了,自己目测一下
}
希望对你有所帮助~