亲，你是不是也遇到了微信小程序的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. go反射原理

    go反射原理 本文基于go1.13.15 1.go汇编 1.1 基本语法 go采用plan9的汇编器完成汇编,有下面几个重要的伪寄存器 FP: Frame pointer: 局部变量访问 PC: Pr ...

  2. 第十五篇 -- QListWidget与QToolButton（界面）

    效果图: 这还只是一个界面,并没有实现相应功能. 先看下这图的构成吧. 工具栏的就是将Action拖上去,这部分前面已经介绍过了,那就看下面这部分的构图. 1.左侧是一个工具箱(ToolBox)组件, ...

  3. 第六篇--MFC美化界面

    1.MFC如何设置背景颜色 首先,为对话框添加WM_CTLCOLOR消息,方法为:右击Dialog窗口 --> Class Wizard --> Messages --> WM_CT ...

  4. 第九篇 -- cpu的学习

    CPU的核数关系: 总核数 = 物理CPU个数 X 每颗物理CPU的核数 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 Linux中查看CPU数: # 查看物理CPU个数 ...

  5. SQL修改列名，增加列，删除列语句的写法

    1.修改数据表名 ALTER TABLE [表名.]OLD_TABLE_NAME RENAME TO NEW_TABLE_NAME; 2.修改列名 ALTER TABLE [表名.]TABLE_NAM ...

  6. 货币兑换问题（贪心法）——Python实现

      # 贪心算法求解货币兑换问题 # 货币系统有 n 种硬币,面值为 v1,v2,v3...vn,其中 v1=1,使用总值money与之兑换,求如何使硬币的数目最少,即 x1,x2,x3...xn 之 ...

  7. 如何在windows 11中安装WSLG(WSL2)

    什么是 WSL WSL(Windows Subsystem for Linux):Windows 系统中的一个子系统,在这个子系统上可以运行 Linux 操作系统. 可以让开发人员直接在 Window ...

  8. Drupal 远程代码执行漏洞（CVE-2019-6339）

    影响版本 Drupal core 7.62之前的7.x版本.8.6.6之前的8.6.x版本和8.5.9之前的8.5.x版本 poc https://github.com/thezdi/PoC/blob ...

  9. java时间工具类型,格式化时间,最近7天 月初 月末 季度 月度 时间格式化 等等

    package com.tz.util; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util. ...

  10. UI自动化学习笔记- 日志相关操作

    一.日志相关 1.日志 概念:日志就是用于记录系统运行时的信息,对一个事件的记录,也称log 1.1 日志的作用 调试程序 了解系统程序运行的情况,是否正常 系统程序运行故障分析与问题定位 用来做用户 ...