微信小程序--给button元素设置宽度不生效的解决办法

最新推荐文章于 2025-10-11 09:44:37 发布
原创 最新推荐文章于 2025-10-11 09:44:37 发布 · 2.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

博客介绍了小程序的设置技巧，通过删除app.json里 “style”: “v2” 后再进行设置即可。

在这里插入图片描述把app.json里 “style”: “v2” 删除，再设置就可以了。

【微信小程序】基础组件-scroll-view滚动视图容器
墨夶的博客
11-21 3478
组件是微信小程序中非常重要的布局组件，支持多种滚动行为和样式控制。通过合理使用组件及其属性和事件，可以构建出流畅且功能丰富的滚动视图。希望本文对你的微信小程序开发有所帮助。😊。
微信小程序-仿朋友圈点赞评论操作面板
Sir514的博客
02-08 2464
目录微信小程序-仿朋友圈点赞评论操作面板一、效果二、实现1.wxml实现2.js实现3.wxss实现三、记录1.dataset使用 微信小程序-仿朋友圈点赞评论操作面板 一、效果 二、实现 1.wxml实现 <!-- wx:index = "index":列表循环后所有位置都可以访问索引 --> <view class="item" wx:for="{{list}}" wx:index = "index"> <view class="left"> &
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
08-28
主要介绍了微信小程序实现点击按钮修改文字大小功能,涉及微信小程序事件绑定及setData动态修改Page页面data数据,进而控制页面元素属性动态改变的相关操作技巧,需要的朋友可以参考下
微信小程序button按钮设置宽度无效
weixin_55020138的博客
05-26 1757
在开发小程序的过程中，遇到了button按钮设置宽度无效的问题。微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级，涉及的组件有 button,icon,radio,checkbox,switch,slider。app.json 中配置 “style”: “v2” 表明启用新版的组件样式。因此我们的button是有默认样式的。当我们想要自定义按钮样式时，需要在wxss中编写按钮的样式来覆盖默认样式。先贴原来的代码
微信小程序开发按钮button宽度无法改变解决办法
最新发布
u013302168的博客
10-11 169
在微信小程序中， button 组件有默认的样式，特别是宽度。要改变按钮宽度，需要添加一些额外的样式来覆盖默认样式。wxss样式文件中，修改button按钮宽度width属性无效果。
【微信小程序】按钮button组件宽设置无效解决方案
向着光芒的女孩
08-04 6401
在小程序里设置button组件的width竟然失效，让我们来看看原因和解决方案。
解决微信小程序button宽度设置无效
Syh265的博客
03-10 893
解决微信小程序button宽度设置无效
解决微信小程序的button按钮设置宽度无效的问题
热门推荐
只会cv 的博客
03-10 1万+
方法一 （推荐使用）直接在button按钮上写行内样式 wxml代码示例 <button type="primary" style="width:100%">按钮</button> 方法二 删除app.json的配置"style": "v2" 在app.json 中配置 “style”: "v2"之后就可以启用新版的组件样式，emmm存在即有它的道理，没事咱就不动它......
微信小程序flex-grow无效
youhebuke225的博客
08-22 1025
在微信小程序中使用 Flexbox 布局时，如果遇到flex-grow属性无效的情况，可能是由几个不同的原因导致的。
微信小程序 ---在Vscode上编辑，微信开发者工具上预览，快速上手
weixin_43323097的博客
08-17 1万+
微信小程序 ---在Vscode上编辑，微信开发者工具上预览，快速上手
【微信小程序】WXML-组件
领头羊的博客
07-29 1705
学习微信小程序的组件，参考官方DOC。需要啥组件直接去官方DOC拿code就完事=）
微信小程序WXSS的button样式中width设置失效
weixin_66476244的博客
06-01 388
微信开发工具的版本是v2版本，通过在WXSS中直接对button的宽度设置不适配，在 app.json 文件，将末尾的 “style”: "v2"删掉就好。button组件增加class无效。或者内置样式style。
解决微信小程序中button按钮设置width无效的问题
追梦的女孩博客
11-24 530
https://blog.youkuaiyun.com/qq_41286138/article/details/105234285 借鉴该文章，成功解决。
微信小程序button修改样式无效
读心悦
02-06 4126
效果如下图中： 这是修改样式后在开发工具中的效果。 但是在手机上预览就是无效的了，如下图： 原来微信小程序的基础样式已经升级到v2版本了，在app.json中可以查阅到： "style": "v2", //基础样式升级 "sitemapLocation": "sitemap.json" 把"style": "v2", 删除就可以了！ ...
微信小程序 button 自定义失效
weixin_43794095的博客
02-03 545
转自https://www.cnblogs.com/fightjianxian/p/13786328.html 方法1. 样式中加入!important，即：width: 100% !important; wxss代码示例 .login-btn { font-size: 16px; width: 100% !important; font-weight: 400; color: #fff; border-radius: 4px; border:1px soli
微信小程序中设置按钮上的文字大小，换行或溢出
有问题或资源连接有缺失的可以私信公众号新潮看世界获取
10-21 2072
在上述代码中，通过设置按钮的样式类 `.button-style` 的 `font-size` 属性为 `16px`，可以将按钮上的文字大小设置为 16 像素。在微信小程序中，可以通过设置按钮上文字的 `font-size` 样式属性来调整文字的大小。可以使用 `white-space` 和 `overflow` 属性来处理这些情况。/* 设置文字大小为 16px */出现换行或溢出的情况。
微信小程序之button按钮自适应大小
noveto的博客
02-15 9243
微信小程序之button按钮自适应大小，可以在button上修改大小样式，不用自定义按钮。
微信开发修改button里的字体大小_使用OPPO手机注意了！打开“开发者选项”，手机性能大幅度提升...
weixin_32098191的博客
12-14 695
使用OPPO手机的人大概都知道，其实在OPPO手机中里面隐藏了很多实用性的小技能。但是手机中的“开发者”选项想必大家并不是很了解，下面，就来给大家详细解释一下“开发者选项”的详细功能吧！打开“开发者选项”打开手机【设置】→【其他设置】→【开发者选项】→输入验证码后打开“开发者选项”开发者选项的功能1、后台进程限制随着手机里面APP数量的增多，我们在使用手机时，总是会打开很多程序的后台，后台运行的越...
＜wx-open-launch-app＞标签样式设置无效及按钮部分区域点击无响应问题
q1003675852的博客
12-17 1197
本文记录标签样式设置无效及按钮部分区域点击无响应问题及解决方案
微信小程序view的margin-right不生效
05-27
### 微信小程序 `view` 组件 `margin-right` 样式不生效的原因 在微信小程序开发中，当遇到 `view` 的 `margin-right` 样式无法正常工作的情况时，通常是由以下几个原因引起的： #### 1. **盒模型计算错误** 如果给 `view` 设置了 `width: 100%` 并同时设置了 `margin` 属性，则可能导致实际宽度超出父级容器的宽度。例如，在手机屏幕宽度为 400px 的情况下，设置 `width: 100%` 和 `margin: 10px` 后，总宽度会变为 420px (400 + 10 + 10)，从而导致溢出现象[^1]。 解决方法之一是移除 `width: 100%` 或者调整布局逻辑以避免宽度过大。另一种方式是通过设置 `box-sizing: border-box` 来改变盒模型的行为，使得 `padding` 和 `border` 被包含在指定的宽度之内，但这并不能完全解决问题中的 `margin-right` 效果异常情况。 ```css .containerx { background: yellow; height: 100px; margin: 10px; box-sizing: border-box; } ``` --- #### 2. **Flex 布局的影响** 如果父容器采用了 Flex 布局 (`display: flex`)，子元素之间的间距可能受到 `justify-content` 或其他属性的影响，这可能会掩盖或干扰 `margin-right` 的作用。例如，即使设置了 `margin-right`，但如果 `justify-content` 是 `space-between` 或类似的值，那么子项间的距离由算法决定而非手动设定的 `margin`[^2]。 在这种场景下，可以通过以下两种方式进行修复： - 确保子元素被包裹在一个额外的 `view` 中，以便它们能够独立于父容器的 Flex 特性。 - 使用 `align-items`, `align-self` 或其他相关属性进一步微调布局行为。 以下是修正后的 WXML 文件结构示例： ```html <view class="header"> <view> <button style="width:15vh" class="cancel">取消</button> </view> <view> <button style="width:15vh" class="send">发送</button> </view> </view> ``` 对应的 WXSS 如下所示： ```css .header { display: flex; justify-content: space-between; overflow: hidden; margin-bottom: 10px; width: 100%; background-color: white; } .cancel, .send { background-color: #c5e798; color: black; border: none; padding: 5px 10px; border-radius: 5px; } ``` --- #### 3. **按钮样式特殊处理** 对于某些特定的小程序组件（如 `<button>`），其默认样式可能存在覆盖或者冲突的现象。因此，直接通过 `.class` 定义的样式可能不起作用，而需要借助内联 `style` 方式强制应用样式[^2]。 例如，下面的例子展示了如何确保按钮宽度有效： ```html <button style="width:15vh;" class="cancel">取消</button> ``` 而在 CSS 中定义相同的宽度则可能失效： ```css .cancel { width: 15vh; /* 此处可能无效 */ } ``` 这种差异可能是由于小程序内部对原生控件进行了特殊的渲染优化所致。 --- #### 总结解决方案 针对 `view` 的 `margin-right` 不生效问题，可以从以下几个方面入手排查并解决： 1. 检查是否存在盒子尺寸超限的问题，并适当调整 `width` 和 `box-sizing` 参数； 2. 如果涉及 Flex 布局，尝试将子节点嵌套到单独的 `view` 中，减少外部影响； 3. 对于特殊情况下的组件样式（如 `<button>`），优先考虑使用内联 `style` 方法替代传统类名绑定。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值