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

方法1.

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

wxss代码示例

1
2
3
4
5
6
7
8
9
.login-btn {
    font-size16px;
    width100% !important;
    font-weight400;
    color#fff;
    border-radius: 4px;
    border:1px solid rgba(254,50,50,1);
    background:linear-gradient(180deg,rgba(241,94,94,10%,rgba(222,62,62,1100%);
}

  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. Leetcode 春季打卡活动 第一题:225. 用队列实现栈

    Leetcode 春季打卡活动 第一题:225. 用队列实现栈 Leetcode 春季打卡活动 第一题:225. 用队列实现栈 解题思路 这里用了非常简单的思路,就是在push函数上做点操作,让队头总 ...

  2. Spring Boot的MyBatis注解:@MapperScan和@Mapper(十七)

    1.Spring Boot与MyBatis融合的矛盾问题: Spring家族的使命就是为了简化而生,但是随着Spring的发展壮大,有点事与愿违了.为了坚持初心,Spring家族祭出了一大杀器---S ...

  3. 基于小熊派Hi3861鸿蒙开发的IoT物联网学习【五】

    BearPi-HM_Nano开发板鸿蒙OS内核编程开发--消息队列 什么是消息队列?        答:消息队列中间件是分布式系统中重要的组件,主要解决应用耦合.异步消息.流量削锋等问题.实现高性能. ...

  4. 基于小熊派Hi3861鸿蒙开发的IoT物联网学习【一】

    基于小熊派鸿蒙季BearPi-HM_Nano HarmonyOS 鸿蒙系统Hi3861开发板NFC  开发步骤:1.购买开发板:某宝上购买就行 2.安装开发环境 3.下载源码 4.编写案例并执行 开发 ...

  5. 手把手教你玩转HarmonyOS版地图应用开发

    ​一.导读 7月31日,华为HarmonyOS开发者日将在杭州举行.为了方便更多开发者,高德开放平台地图SDK已在业内率先实现鸿蒙化迁移和重构,全面适配HarmonyOS并面向开发者免费发布.开发者可 ...

  6. 离线安装rpm包并解决依赖(升级vsftpd为例)

    背景  实际开发中,我们的linux服务器是处理离线状态的,并不能访问互联网.如果此时要在linux上安装或者升级软件,就只能通过rpm包的安装方式.rpm包安装有一个缺陷,就是不能处理安装包的依赖问 ...

  7. react native踩坑记录

    一 .安装 1.Python2 和Java SE Development Kit (JDK)可以直接通过腾讯电脑关键安装, Android SDK安装的时候路径里不能有中文和空格 2.配置java环境 ...

  8. jstack 命令使用经验总结

    jstack 命令的基本使用 jstack 在命令使用上十分简洁, 其信息量与复杂度主要体如今 thread dump 内容的分析上;web # 最基本的使用sudo -u xxx jstack {v ...

  9. Spring学习笔记-DI(依赖注入)

    构造器注入(见前贴) Set注入[重点] 依赖注入:Set注入 依赖:bean对象的创建依赖于容器 注入:bean对象的所有属性由容器来注入 [环境搭建] 复杂类型 // Class Address ...

  10. centos linux下配置固定ip,方便xshell连接

    如何给centos linux设置固定ip地址,设置Linux系统的固定IP地址 首先wmware打开虚拟机 打开xshell6连接虚拟机(比较方便,这里默认设置过Linux的ip,只是不固定,每次打 ...