亲，你是不是也遇到了微信小程序的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

微信小程序的button按钮设置宽度无效的更多相关文章

  1. 微信小程序去除button按钮的边框

    小程序开发记录 小程序开发中, 有时候我们希望button不要有边框, 需要使用button::after来实现, 具体如下: .operations button::after{border:0 n ...

  2. mpvue开发微信小程序，分享按钮报错：`Cannot read property 'apply' of null`

    用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null onShareAppMessage 是于微信小程序Pages的生命周期钩子,顾这个方 ...

  3. 微信小程序加密解密 C# 以及 填充无效,无法被移除错误的解决方案 Padding is invalid and cannot be removed

    解密加密源码 using System; using System.Security.Cryptography; using System.Text; namespace Wechat { publi ...

  4. 微信小程序 网络请求之设置合法域名

    设置域名 登录微信公众号后台小程序中 设置→开发设置→服务器设置 必须设置域名,微信小程序才能进行网络通讯,不然会报错 如果设置好了合法域名,开发工具还提示不在合法域名列表中,因为在微信会有一段时间的 ...

  5. 微信小程序开发及相关设置小结

    今年过年,主要看了<奇葩说>和<电锯惊魂>,很不错,好东西的确需要留出足够的时间来看,匆匆忙忙走马观花是对作者的不尊重.除此之外,就是研究了一下微信小程序开发,先说对小程序的看 ...

  6. 微信小程序 - height: calc(xx - xx)；无效

    遇到一个小问题,记录一下 问题:在微信小程序中使用scroll-view标签时,用height:cale(xx - xx)设置高度无效,在page中设置高度为百分百依旧无效 解决办法:直接在父级vie ...

  7. 微信小程序去除Button默认样式

    在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤. (一)实现效果1.实现前(默认样式): 2.实现后(去除默认 ...

  8. 微信小程序中button去除默认的边框

    button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; p ...

  9. 微信小程序 image图片组件实现宽度固定 高度自适应

    给img的mode设置值 注1:image组件默认宽度300px.高度225px 注2:image组件中二维码/小程序码图片不支持长按识别.仅在wx.previewImage中支持长按识别. mode ...

随机推荐

  1. CentOS下 Django部署 uWSGI+Django（一）

    由于新冠疫情的缘故,公司要求员工停薪休假,赋闲在家的时候还是决定做点正事,学学习. 本人Linux入门水平,Python入门水平,所以在网上找的那些python部署的帖子,看的是云里雾里的,也没有达到 ...

  2. 解决pip下载速度慢的问题

    解决链接:https://blog.csdn.net/u013901768/article/details/82343512 感谢这位博主的分享. 博客内容如下: 1. 安装时强制使用国内源进行安装, ...

  3. Python脚本：爬取天气数据并发邮件给心爱的Ta

    第一部分:爬取天气数据 # 在函数调用 get_weather(url = 'https://www.tianqi.com/foshan') 的 url中更改城市,foshan为佛山市 1 impor ...

  4. intouch/ifix嵌入视频控件2（报警视频联动初步思路）

    在项目中有朋友遇到类似的需求,ifix中嵌入视频,并实现报警与视频的联动功能.诸如,重要设备启动时,摄像头自动弹窗,并持续一段时间自动弹窗关掉:设备故障时,摄像头自动截图,录像一段时间存储:设备停止时 ...

  5. jboss未授权访问

    测试 poc地址 https://github.com/joaomatosf/jexboss

  6. shell脚本(14)-正则表达式

    一.正则表达式介绍 正则表达式是一种文本模式匹配,包括普通字符(a...z)和特殊字符(元字符). 它是一种字符串匹配模式,可以用来检查一个字符串是否含有某种子串.将匹配的子串替换或者从某个字符串中取 ...

  7. Java的equsals和==

    先上结论:在我们常用的类中equals被重写后,作用就是为了比较对象的内容,==是比较对象的内存地址.但并不能说所有的equals方法就是比较对象的内容. Java 中的==: 1.对于对象引用类型: ...

  8. 面试官疯狂问我：char和varchar的区别 怎么办？愣着干嘛？进来白嫖啊！

    MySQL的修仙之路,图文谈谈如何学MySQL.如何进阶!(已发布) 面前突击!33道数据库高频面试题,你值得拥有!(已发布) 大家常说的基数是什么?(已发布) 讲讲什么是慢查!如何监控?如何排查?( ...

  9. C 购买商品的游戏

    1 #include <stdio.h> 2 #include <stdlib.h> 3 #include <string.h> 4 /* 5 *模拟实现道具店购物 ...

  10. JAVA的一般输入输出 和 快速输入输出 （BufferedReader&BufferedWrite）(转载)

    1.JAVA的一般输入输出 和 快速输入输出 (BufferedReader&BufferedWrite) 摘要 本文主要介绍快速输入输出, 文中提到了几个IO类,这里推荐使用Buffered ...