收藏
回答

单行多个button按钮之间为什么无空隙?

最近在学习小程序开发,自己手敲的代码,和教程代码一样(通过工具逐行比对了代码,确保没有敲错代码),是运行效果不一样,不知道问题出在哪里了?恳请大神赐教


我敲的代码:

<!--index.wxml-->

<view class="box">

  <view class='title'>基本绘图</view>

  <view>

    <canvas canvas-id="myCanvas" ></canvas>

  </view>


  <view class='btnLayout'>

    <button type='primarybindtap="clear">清除</button>

    <button type='primarybindtap="drawDot">画点</button>

    <button type='primarybindtap="drawCircle">画圆</button>

  </view>


  <view class='btnLayout'>

    <button type='primarybindtap="drawDash">画虚线</button>

    <button type='primarybindtap="capAndJoin">端点交点</button>

    <button type='primarybindtap="drawText">画字</button>

  </view>


  <view class='btnLayout'>

    <button type='primarybindtap="circularGrad">圆形渐变</button>

    <button type='primarybindtap="shadowRect">阴影矩形</button>

    <button type='primarybindtap="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='primarybindtap="clear">清除</button>

    <button type='primarybindtap="drawDot">画点</button>

    <button type='primarybindtap="drawCircle">画圆</button>

  </view>


  <view class='btnLayout'>

    <button type='primarybindtap="drawDash">画虚线</button>

    <button type='primarybindtap="capAndJoin">端点交点</button>

    <button type='primarybindtap="drawText">画字</button>

  </view>


  <view class='btnLayout'>

    <button type='primarybindtap="circularGrad">圆形渐变</button>

    <button type='primarybindtap="shadowRect">阴影矩形</button>

    <button type='primarybindtap="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; /* 弹性项目沿主轴方向平均分布,两边留有一半的间隔空间。 */

}



回答关注问题邀请回答
收藏

5 个回答

  • 风禾
    风禾
    2021-06-08

    因为你的宽度被覆盖了,这样写

    button {

      width: 100px!important;

    }


    2021-06-08
    有用 1
    回复 1
    • 未生
      未生
      2021-06-08
      刚试了下您说的,可以解决同行按钮之间间距问题,但是按钮上的文字无法在一行显示。谢谢您的建议。
      2021-06-08
      回复
  • AnDrew
    AnDrew
    2021-06-08

    你看看他的显示器是不是和你比例不一样 你的应该比她的小

    2021-06-08
    有用 1
    回复 9
    • 未生
      未生
      2021-06-08
      谢谢您的回复,机型是一样的
      2021-06-08
      回复
    • 未生
      未生
      2021-06-08
      两个代码都是在我的电脑上微信开发者工具里运行的,机型我没改动
      2021-06-08
      回复
    • AnDrew
      AnDrew
      2021-06-08回复未生
      这个时候直接审查元素 就可以
      2021-06-08
      1
      回复
    • 未生
      未生
      2021-06-08回复AnDrew
      没听懂“直接审查元素”怎么操作,刚搜了下谷歌,“审查元素”好像是网页端调出控制台,我这个代码不知道怎么审查元素……
      2021-06-08
      回复
    • AnDrew
      AnDrew
      2021-06-08回复未生
      给你个链接 你看下 https://blog.csdn.net/flysnownet/article/details/97131609
      2021-06-08
      1
      回复
    查看更多(4)
  • 梨布黎
    梨布黎
    2022-10-11

        <button type='primarybindtap="drawDot" style="margin-left:10px;">画点</button>

    2022-10-11
    有用
    回复
  • 平安
    平安
    2022-07-19

    你审查下元素可以发现是margin:0px,或者是padding:0px 你把他的边距改一下就可以了。

    2022-07-19
    有用
    回复
  • Cjiang
    Cjiang
    2021-06-08

    看下宽度 width?

    2021-06-08
    有用
    回复
登录 后发表内容