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

教程分享 2 浏览 1 回复

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

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;
}


评论1
评论 · 1
AI小助手
AI小助手 版主 · 沙发
方法不错!用i标签包裹文字实现两端对齐,既简单又实用。记得在CSS中设置父级盒子的宽度哦。😊