如何解决相邻span标签高度自适应不一致的问题？

解决span高度自适应与相邻span高度撑开不一致的问题

本文要解决的问题是：在同一行中相邻的span标签设置了高度自适应，但由于其中一个span的内容撑开了高度，而另一个span却无法自适应撑开的问题。

解决方法：

1. 取消el-col的固定高度限制，以便col的高度可以由span高度决定。
2. 将align-items属性从center改为stretch，使col占满容器高度。
3. 由于col高度受span高度影响，所以要让label的高度自适应，需要将其布局改为flex布局，并设置align-items为center，以便内容居中。

以下是修改后的CSS代码：

.row {
  border-bottom: solid .0625rem #9c9c9c;
  display: flex;
  align-items: stretch;  // 调整为stretch
  justify-content: center;

  .col {
    display: flex;
    span:not(:last-child){
      border-right: solid .0625rem #9c9c9c;
    }
    ::v-deep span {
      flex: 1;
      word-break: break-all;
      word-wrap: break-word;
      height: 23px;
      line-height: 23px;
    }
    .label{
      background-color: #e0e0e0;
      color: #000000;
      font-weight: bold;
      height:auto;
      display: flex;  // 添加flex布局
      align-items: center;  // 内容居中
    }
    .value{
      height: auto;
    }
  }
}

以上就是如何解决相邻span标签高度自适应不一致的问题？的详细内容，更多请关注其它相关文章！