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