在开发微信小程序过程中,如果想给button按钮自定义宽的话,在wxss中设置是没有效果的,只设置高会有效果。

比如
wxml

<button class="btn">只喝怡宝</button>

wxss

.btn{
  margin-top: 30rpx;
  width: 400rpx;
  height: 200rpx;
}

效果就是这样的,只有高度生效

在这里插入图片描述

如果想要宽度也生效的话,就需要在button标签设置style属性

<button class="btn" style="width: 600rpx;height: 200rpx;">只喝怡宝</button>

效果如下:
在这里插入图片描述
可以发现设置之后文字没有垂直居中,想要文字垂直居中的话可以设置一下行高line-height就可以了()

<button class="btn" style="width: 600rpx;line-height: 200rpx;">只喝怡宝</button>

在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐