微信小程序的button按钮设置宽度无效

亲，你是不是也遇到了微信小程序的button按钮设置宽度无效。让我来告诉你怎么弄

方法1.

样式中加入!important，即：width: 100% !important;

wxss代码示例

1 2 3 4 5 6 7 8 9

.login-btn {     font-size: 16px;     width: 100% !important;     font-weight: 400;     color: #fff;     border-radius: 4px;     border:1px solid rgba(254,50,50,1);     background:linear-gradient(180deg,rgba(241,94,94,1) 0%,rgba(222,62,62,1) 100%); }

　　wxml代码示例：

1	<button class="login-btn" bindclick="login">登录</button>

 效果如下图哦亲。　　

 

方法2.

标签内，使用style

wxml代码示例：

1	<button class="login-btn" bindclick="login" style="width:100%">登录</button>

　　

方法3.

删除app.json的配置"style": "v2"，不过这个不推荐哦，亲

方法2、方法3参考：https://blog.csdn.net/Echo_cxl/article/details/104783105