表单两端对齐

开发过程中，提出需要冒号对齐且表单标题两端对齐，以下是效果图：


效果图

实现方式（以小程序为例）：

<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中

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容