收藏
回答

父view设置1px的边框,子view高度为100%,设置背景颜色没有填充满,怎么解决?

view:

<view class="tab-box">
  <view class="tab-item active">报名(1333)</view>
  <view class="tab-item">已录用(13)</view>
  <view class="tab-item">未录用(8)</view>
</view>

wxss:

.tab-box{
  width516rpx;
  height62rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  font-size26rpx;
  border1px solid #28AC86;
  border-radius50rpx;
  overflow: hidden;
}
.tab-box .tab-item{
  width100%;
  height100%;
  line-height62rpx;
}
.tab-box .tab-item.active{
  background#28AC86;
  color#ffffff;
}


最后一次编辑于  2022-07-26
回答关注问题邀请回答
收藏

3 个回答

  • 余生
    余生
    2022-07-26

    后面改成这样子就可以了

    .tab-box{
      width: 516rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      text-align: center;
      font-size: 26rpx;
    }
    .tab-box .tab-item{
      width: 100%;
      height: 62rpx;
      line-height: 62rpx;
      border: 1px solid #28AC86;
    }
    /** 第一个tab-item*/
    .tab-box .tab-item:first-child{
      border-right: none;
      border-radius: 50rpx 0 0 50rpx;
    }
    /** 最后一个tab-item*/
    .tab-box .tab-item:last-child{
      border-left: none;
      border-radius: 0 50rpx 50rpx 0;
    }
    .tab-box .tab-item.active{
      background: #28AC86;
      color: #ffffff;
    }
    


    2022-07-26
    有用 1
    回复
  • 武曲心
    武曲心
    2022-07-26

    考虑把边框做到tab-item上

    2022-07-26
    有用 1
    回复 1
    • 余生
      余生
      2022-07-26
      嗯 我后面是这样做的  就可以了
      2022-07-26
      回复
  • ⅴ
    2022-07-25

    设成内边框试试?

    border-style:inset;

    2022-07-25
    有用
    回复
登录 后发表内容