微信小程序的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( 180 deg,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按钮设置宽度无效的更多相关文章
- 微信小程序去除button按钮的边框
小程序开发记录 小程序开发中, 有时候我们希望button不要有边框, 需要使用button::after来实现, 具体如下: .operations button::after{border:0 n ...
- mpvue开发微信小程序,分享按钮报错:`Cannot read property 'apply' of null`
用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null onShareAppMessage 是于微信小程序Pages的生命周期钩子,顾这个方 ...
- 微信小程序加密解密 C# 以及 填充无效,无法被移除错误的解决方案 Padding is invalid and cannot be removed
解密加密源码 using System; using System.Security.Cryptography; using System.Text; namespace Wechat { publi ...
- 微信小程序 网络请求之设置合法域名
设置域名 登录微信公众号后台小程序中 设置→开发设置→服务器设置 必须设置域名,微信小程序才能进行网络通讯,不然会报错 如果设置好了合法域名,开发工具还提示不在合法域名列表中,因为在微信会有一段时间的 ...
- 微信小程序开发及相关设置小结
今年过年,主要看了<奇葩说>和<电锯惊魂>,很不错,好东西的确需要留出足够的时间来看,匆匆忙忙走马观花是对作者的不尊重.除此之外,就是研究了一下微信小程序开发,先说对小程序的看 ...
- 微信小程序 - height: calc(xx - xx);无效
遇到一个小问题,记录一下 问题:在微信小程序中使用scroll-view标签时,用height:cale(xx - xx)设置高度无效,在page中设置高度为百分百依旧无效 解决办法:直接在父级vie ...
- 微信小程序去除Button默认样式
在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤. (一)实现效果1.实现前(默认样式): 2.实现后(去除默认 ...
- 微信小程序中button去除默认的边框
button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; p ...
- 微信小程序 image图片组件实现宽度固定 高度自适应
给img的mode设置值 注1:image组件默认宽度300px.高度225px 注2:image组件中二维码/小程序码图片不支持长按识别.仅在wx.previewImage中支持长按识别. mode ...
随机推荐
- 【洛谷P1318积水面积】最小生成树
我写一篇绝对原创的题解,算法原创,求洛谷通过!!!(让更多人看到这篇题解) 绝大多数人肯定认为这道题是一道模拟题 以下为正解 我们来看一下这一道题,其实就是找到左右高点,在模拟. 但是这个是正常人的想 ...
- 深入源码理解Spring整合MyBatis原理
写在前面 聊一聊MyBatis的核心概念.Spring相关的核心内容,主要结合源码理解Spring是如何整合MyBatis的.(结合右侧目录了解吧) MyBatis相关核心概念粗略回顾 SqlSess ...
- 第九篇 -- 可以上网,连WIFI弹出网页
最近在调试WIFI模块时,程序路径没走对,导致运行了其他的函数,修改了配置文件,之后每次连接WIFI时都会弹出网页,并且明明可以上网,下面电脑符号那儿还会出现黄标,甚是心烦.上网搜索一番,终是解决了. ...
- 14Java进阶网络编程API
1.网络协议的三要素:语义.语法和时序 语义表示要做什么,语法表示要怎么做,时序表示做的顺序. 2.网络OSI七层模型 OSI/RM 模型(Open System Interconnection/Re ...
- solr(CVE-2019-17558)远程命令执行
影响版本 Apache Solr 5.x到8.2.0版本 测试 https://github.com/jas502n/CVE-2019-0193
- JBoss 5.x/6.x 反序列化漏洞(CVE-2017-12149)
检测
- noip模拟33[进阶啦啦啦]
noip模拟33 solutions 不知道该咋说,这场考试其实是我这三四场以来最最最最最顺心的一场了 为啥呢?因为我这回思考有很多结果,得到了脑袋的回复 就是你想了半个小时就有了一点点头绪,那感觉就 ...
- 为数不多的人知道的 Kotlin 技巧及解析
文章中没有奇淫技巧,都是一些在实际开发中常用,但很容易被我们忽略的一些常见问题,源于平时的总结,这篇文章主要对这些常见问题进行分析. 这篇文章主要分析一些常见问题的解决方案,如果使用不当会对 性能 和 ...
- SpringBoot报错:Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.
Spring Boot报错:Error starting ApplicationContext. To display the conditions report re-run your applic ...
- 免费个人图床搭建gitee+PicGo
我们写博客的时候经常会需要配图,特别是markdown写的时候只能通过网络链接来展示图片. 首先来说存储仓库.测试过几款存储图片的仓库,最终选择方案3: 1.阿里OSS需要付费,空间和流量双向收费,对 ...