开发过程中,提出需要冒号对齐且表单标题两端对齐,以下是效果图:
实现方式(以小程序为例):
<view class="form-item">
<text class="title">取件码</text>:{{recordDetail.code}}
</view>
.title {
letter-spacing:0.5em;
margin-right:-0.5em;
}
由于最大对齐字数x是4个字,而当前所需对齐字数y是3个字,所以根据公式(x-y)/(y-1),这里是0.5em。注意不要把冒号也放进title中