在進行網頁設計時，我們經常會看到這樣的樣式：文字兩端對齊。
css為我們提供了一個屬性可以實現這樣的效果：text-align: justify。不過這個只能用來設定多行文字（除最後一行）。如果只有單行的話，是不起效果的。那怎麼辦呢？這裡有兩種解決方案：

第一種

藉助偽元素或者內聯元素使文字不是最後一行。具體程式碼：

<form>
  <p>
    <label>使用者名稱</label>:
    <input type="text">
  </p>
  <p>
    <label>密碼</label>:
    <input type="password">
  </p>
</form>
 

scss程式碼：

form {
  p {
    height: 20px;
    line-height: 20px;
    label {
      display: inline-block;
      width: 60px;
      text-align: justify;
      vertical-align: top;
      &:after {
        display: inline-block;
        width: 100%;
        content: '';
      }
    }
  }
}

第二種

text-align-last: justify;

form {
  p {
    height: 20px;
    line-height: 20px;
    label {
      display: inline-block;
      width: 60px;
      text-align: justify;
      text-align-last: justify;
    }
  }
}

第二種方法並不是所有瀏覽器都相容，https://caniuse.com/#search=text-align-last