收藏
回答

问一个布局问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug text布局 客户端 7.0 2.5.1



我的代码:

<view class="keyboard">

<text wx:for="{{['1','2','3','4','5','6','7','8','9',' ','0','撤退']}}" class="kb-box center">{{item}}</text>

</view>


.keyboard{

margin-top:40rpx;

width:100%;

}

.kb-box{

display: inline-flex;

width:33.1%;

height:100rpx;

border-top:1px solid #D6DAE1;

}

.kb-box:nth-child(3n+2){

border-left:1px solid #D6DAE1;

border-right:1px solid #D6DAE1;

}


效果是这样的:


注意最左下角的text,莫名其妙下沉了一点,如果在里面输入内容的话(比如:wx:for="{{['1','2','3','4','5','6','7','8','9','* ','0','撤退']}}"),就可以对齐,但是现在需求不允许输入内容,怎么解决?

最后一次编辑于  03-05
回答关注问题邀请回答
收藏

3 个回答

  • 连胜
    连胜
    03-05

    加个*可以?你可以考虑把左下角的这个元素设置成透明,或者把文字设置为透明,或者font-size 设置为0

    03-05
    赞同 2
    回复
  • 勇敢的少年
    勇敢的少年
    03-05

    加了个不知道什么的空白字符 已经解决了

    03-05
    赞同
    回复
  • DNA
    DNA
    03-05

    可以尝试这样修改:

    .keyword {
      display: flex;
      flex-wrap: wrap;
      margin-top: 40rpx;
      width: 100%;
    }
     
    .kb-box{
      width:33.3%;
      height:100rpx;
      box-sizing: border-box;
      border-top:1px solid #D6DAE1;
    }
     
    .kb-box:nth-child(3n+2){
      border-left:1px solid #D6DAE1;
      border-right:1px solid #D6DAE1;
    }


    03-05
    赞同
    回复