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

一分耕耘，一分收获！既然都打开这篇《如何解决相邻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标签高度自适应不一致的问题？ 》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！