你审查下元素可以发现是margin:0px,或者是padding:0px 你把他的边距改一下就可以了。
单行多个button按钮之间为什么无空隙?最近在学习小程序开发,自己手敲的代码,和教程代码一样(通过工具逐行比对了代码,确保没有敲错代码),是运行效果不一样,不知道问题出在哪里了?恳请大神赐教 [图片] [图片] 我敲的代码: <!--index.wxml--> <view class="box"> <view class='title'>基本绘图</view> <view> <canvas canvas-id="myCanvas" ></canvas> </view> <view class='btnLayout'> <button type='primary' bindtap="clear">清除</button> <button type='primary' bindtap="drawDot">画点</button> <button type='primary' bindtap="drawCircle">画圆</button> </view> <view class='btnLayout'> <button type='primary' bindtap="drawDash">画虚线</button> <button type='primary' bindtap="capAndJoin">端点交点</button> <button type='primary' bindtap="drawText">画字</button> </view> <view class='btnLayout'> <button type='primary' bindtap="circularGrad">圆形渐变</button> <button type='primary' bindtap="shadowRect">阴影矩形</button> <button type='primary' bindtap="translucent">半透明</button> </view> </view> /**index.wxss**/ canvas { width: 100%; height: 340px; background-color: cornflowerblue; } button { width: 100px; } .btnLayout { display: flex; flex-direction: row; margin: 10px; justify-content: space-around; } 教材附带的代码: <!--pages/API/Drawing/index.wxml--> <view class="box"> <view class='title'>基本绘图</view> <view> <canvas canvas-id="myCanvas" ></canvas> </view> <view class='btnLayout'> <button type='primary' bindtap="clear">清除</button> <button type='primary' bindtap="drawDot">画点</button> <button type='primary' bindtap="drawCircle">画圆</button> </view> <view class='btnLayout'> <button type='primary' bindtap="drawDash">画虚线</button> <button type='primary' bindtap="capAndJoin">端点交点</button> <button type='primary' bindtap="drawText">画字</button> </view> <view class='btnLayout'> <button type='primary' bindtap="circularGrad">圆形渐变</button> <button type='primary' bindtap="shadowRect">阴影矩形</button> <button type='primary' bindtap="translucent">半透明</button> </view> </view> /* pages/API/Drawing/index.wxss */ canvas { width: 100%; height: 340px; background-color: cornflowerblue; } button { width: 100px; } .btnLayout { display: flex; flex-direction: row; margin: 10px; justify-content: space-around; /* 弹性项目沿主轴方向平均分布,两边留有一半的间隔空间。 */ }
2022-07-19