<view class="t-body">
<view class="c-line">
<view class>客户单号:</view>
<view class="c-content">YG20210012</view>
</view>
<view class="c-line">
<view class="left">订单号:</view>
<view class="c-content">SZYG210707002</view>
</view>
</view>
<style>
.t-body {
padding: 30rpx;
background: #fff;
margin-bottom: 24rpx;
}
.cline {
font-size: 28rpx;
display: flex;
margin-bottom: 20rpx;
}
.left {
color: #666;
}
.content {
color: #333;
flex: 1
}
</style>
效果图:
多列数据的情况下,我们为了美观,想让label两端对齐
想要的效果图
解决办法:
1.使用伪类解决
.left {
color: #666;
text-align: justify;
display: inline-block;
width: 140rpx;
}
.left::after {
content: '';
display: inline-block;
width: 100%;
overflow: hidden;
}
2.属性text-align-last: justify;
.left {
color: #666;
text-align: justify;
display: inline-block;
width: 140rpx;
}