CSS实现文本两端对齐

 

 

 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元素出现上下偏移的情况 

参考：http://www.daqianduan.com/6806.html