两个span在一行却高低不一致

最新推荐文章于 2024-04-24 20:38:59 发布

Syyyyy_

最新推荐文章于 2024-04-24 20:38:59 发布

阅读量2.4k

点赞数 2

文章标签： css flex

本文链接：https://blog.csdn.net/weixin_43859703/article/details/90296643

版权

在这里插入图片描述

给第一个span加了超出部分呢省略号以后，两个span虽然还在一个div中，但是居然不同高了！！一个靠上一个靠下一些，我试了各种css居中的方式也没能让两个span同高；
研究了很久发现是overflow：hidden以及不折行影响的，最后解决办法是使用flex布局，两个span就恢复正常了，万能的flex啊！！！

.textTop{
    width: 100%;
    display: flex;
}

.orderName{
    display:inline-block;
    flex: 0.7;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.orderPrice{
    flex: 0.3;
    display: inline-block;
    padding-left: 1rem;
}