百变鹏仔-专注前端行业精选

简单实现文字两端对齐

作者：鹏仔先生日期：2025-04-24 17:08:56 浏览：70 分类：JavaScript

css简单实现文字两端对齐

项目中要实现列表中左侧文字两端对齐，方法很多，比如   或者用标签占位等。下面分享一个简单的方法。

项目用的vue，下方代码适用vue或uniapp，其他框架实现方法同理。

<span class="title" v-html="('车牌号'.split('').map(el => `<i>${el}</i>`).join(''))"></span>

.title{
      width: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
}

也就是将每个文字都裹上一层标签，然后父级盒子用弹性盒直接两端对齐即可，当然父级盒子一定得有个宽度。

手机扫码访问

猜你还喜欢