极客观点
项目管理
HarmonyOS
问题描述
多行使用inine-block布局 出现的BUG，不知道具体原因是在哪里
每一个电影一行是一个item, 每一个"2D,3D"标签是一个item-tag-title,当只有一个item的时候显示正常，但是多个item,就会影响到下一个item里面的item-tag-title,导致这个字元素下沉。如果删除出现问题的item之前的所有item，则这个子元素的item-tag-title恢复正常。
问题出现的环境背景及自己尝试过哪些方法
我感觉这应该是一个布局上的错误，应该是上一个item的某种属性影响到了下一级元素，但是每一个 电影item是一个独立的块，他的高度跟属性如何能影响到下一级元素里面的某一个节点的呢？
尝试过调整vertical,line-height,都是没有解决。
是不是因为rem单位的计算的属性有小数而产生的？
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!--标题-->
<template>
<div class="movie-item">
<!--左侧图片-->
<div class="item-img">
<img :src="item.imgUrl">
<span class="item-play"></span>
</div>
<!--中部信息-->
<div class="item-info">
<!--标题-->
<div class="item-top">
<div class="item-title">{{ item.title }}</div>
<div class="item-tag">
<i class="item-tag-title">{{ item.tagTitle }}</i>
<i class="item-tag-des">{{ item.tagDes }}</i>
</div>
</div>
<!--评分-->
<div class="item-score">
<template v-if="item.beon">
{{ item.scoreMsg }} <i class="item-score-color">{{ item.score }}</i>
</template>
<template v-else>
<i class="item-score-color">{{ item.interest }} </i>人想看 |
{{ item.ondata }}
</template>
</div>
<!--导演、演员-->
<div class="item-director">
{{ item.director }}
</div>
<div class="item-actor">
{{ item.actor }}
</div>
<div class="item-recom-tag">
<span class="t-hot" v-if="item.recomTag == 1">今日最热</span>
<span class="w-hot" v-if="item.recomTag == 2">一周最热</span>
<span class="a-hot" v-if="item.recomTag == 3">口碑最佳</span>
</div>
</div>
<!--右侧购票-->
<div class="item-pay">
<div class="btn-sale" v-if="item.beon">购票</div>
<div class="btn-pre-sale" v-else>预售</div>
<a href="#">特惠</a>
</div>
</div></template>
css如下：
.movie-item
padding-top: .3rem
padding-bottom:.3rem
display:flex
font-size:13px
justify-content: space-around
border-bottom: 1px solid #ededed
box-sizing:border-box
.item-img
max-width:1.32rem
overflow:hidden
border-radius:3px
flex-group:1
img
max-width:100%
.item-info
color:#999
margin-left:.12rem
.item-top
margin-bottom:.14rem
.item-title
color:#000
font-size:16px
font-weight:500
width:7em
overflow:hidden
text-overflow: ellipsis
white-space: nowrap
display:inline-block
.item-tag
font-size:0
box-sizing:border-box
letter-spacing: -1px;
display:inline-block
border:1px solid #999
height:.3rem
line-height:.3rem
border-radius:3px 0 0 3px
i
padding-left:.05rem
padding-right:.05rem
display:inline-block
font-size:12px
box-sizing:border-box
text-align:center
&.item-tag-title
color:#fff
background:#999
border-radius:3px 0 0 3px
margin-left:-1px
&.item-tag-des
color:#999
.item-score
margin-bottom:.08rem
.item-score-color
color:#fea54c
font-size:14px
.item-director
margin-bottom:.08rem
.item-actor
margin-bottom:.08rem
.item-recom-tag
font-size:12px
.t-hot
border:1px solid #fea54c
padding:.05rem
color:#fea54c
.w-hot
border:1px solid #ff4d64
padding:.05rem
color:#ff4d64
.a-hot
border:1px solid #349cec
padding:.05rem
color:#349cec
.item-pay
flex-group:1
max-width:1.32rem
margin-left:.15rem
display:flex
flex-direction:column
text-align:center
flex-wrap:wrap
justify-content:center
align-items:center
div
color: #fff
box-sizing: border-box
height: .56rem
line-height: .56rem
padding: 0 .26rem
font-size: 12px
border-radius: 2.4rem
display:block
margin-bottom:.1rem
text-align:center
.btn-sale
background-image: -webkit-linear-gradient(45deg,#ff7ba0,#ff4d64)
background-image: linear-gradient(45deg,#ff7ba0,#ff4d64)
.btn-pre-sale
background-image: -webkit-linear-gradient(45deg,#55c2ff,#349cec)
background-image: linear-gradient(45deg,#55c2ff,#349cec)
a
display:block
font-size:12px
text-align:center
你期待的结果是什么？实际看到的错误信息又是什么？
希望老司机帮我解惑 弄了一天了 毫无头绪。
html5
看半天没有看懂