text-align: justify 实现两端对齐文本效果。
但是对最后一行是无效的(因此对单行文本也是无效的), 那要实现上面的效果,我们就要新增一行,使其不再是最后一行。
<template>
<div style="padding: 100px;">
<div class="item">
<span class="label">姓名</span>:
<span class="value">xxx</span>
</div>
<div class="item">
<span class="label">出生日期</span>:
<span class="value">2005年1月1日</span>
</div>
<div class="item">
<span class="label">年龄</span>:
<span class="value">12岁</span>
</div>
</div>
</template>
<style lang="sass" scoped>
.item
height: 32px
line-height: 32px
margin-bottom: 8px
.label
display: inline-block
width: 100px
height: 100%
text-align: justify
vertical-align: bottom
&:after
display: inline-block
width: 100%
content: ''
height: 0
.value
padding-right: 6px
</style>
注意:vertical-align: bottom的设置是为了防止两个相邻的inline-block元素出现上下偏移的情况