问题DOM如下,两个span在同一个a标签下,显示高度不一致:
<a
v-for="(s_item, s_key) in item"
:key="s_key"
class="career-item">
<span class="career-name">{{s_item.name}}</span>
<span class="career-ptime">{{s_item.publishtime}}</span>
</a>
解决办法,给a标签设置flex布局, 两个span分别给flex值,如下
> a.career-item {
font-size: .8rem;
color: #666;
display: flex;
margin: 4px 0;
> .career-name {
white-space: nowrap;
overflow: hidden;
width: 70%;
text-overflow: ellipsis;
display: inline-block;
flex: .7;
}
> .career-ptime {
flex: .3;
}
}