1.效果图
2.样式设置:
.label {
min-width: 136rpx;
text-align-last: justify;
text-align: justify;
text-justify: inter-ideograph; // 这行必加,兼容ie浏览器
padding-left: 22rpx;
display: inline-flex;
justify-content: space-between;
}
注释: 设置display:flex;为弹性盒子
设置弹性盒子的对齐方式:justify-content: space-between; 两端对齐的方式
3.wxml内容
<view class="label">
<text wx:for="{{'姓名'}}">{{item}}</text>
</view>
注释:利用for解耦功能,循环每个字符,添加<text></text>标签,实现两端对齐功能