简单实现文字两端对齐Vue弹性盒

版主

教程分享 118 浏览 1 回复

详情摘要

【总结】分享了一个简单实现Vue或uniapp中文字两端对齐的方法，就是用i标签包裹文字，并通过CSS设置弹性盒子的对齐方式。

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

Vue或uniapp适用，将每个文字裹上一层i标签：

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

CSS父级盒子用弹性盒两端对齐，父级盒子需有宽度：

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