CSS 小技巧之二：分散對齊

當我們使用 display: inline-block 排版的時候，我們能在父層設定 text-align 屬性對齊物件，
可以使用特殊的“分散對齊”方法 (text-align: justfy)，如下圖：

若有三個物件則會像以下呈現：

若有兩個物件則會像以下呈現：

分散對齊會依物件的數量，自動調整間距，切齊頭尾。
以下將講解使用的方式，並以 ul li 舉例。ul 與 li 預設都是類似 display: block 的顯示方式：

首先我們調整 li 為 display: inline-block，寬度就會依內容自動縮放（您也可以指定寬度）：

  li {
    width: 300px; //也可以不設定，依內容縮放
    display: inline-block;
  }

接著我們在 li 的父元素 ul 設定 text-align: justfy。

  ul {
    text-align: justfy
  }

  li {
    width: 300px;
    display: inline-block;
  }

會發現分散對齊並沒有發揮作用，為什麼呢？我們可以從文字的分散對齊看出端倪：


text-align: left

text-align: justfy

可以看到就算設定了 justfy，文字的最後一行仍然沒有被切齊頭尾。
也就是說，當 inline-block 物件只有一行時，由於他就是最後一行，所以 justfy 完全不會有效果。
關鍵在於我們必須要用一個 after 製作寬度 100% 的 inline-block 物件，確保最後一行會被佔滿。

  ul {
    text-align: justfy
  }

  ul:after {
    content: '';
    display: inline-block;
    width: 100%;
  }

  li {
    width: 300px;
    display: inline-block;
  }

如此一來，應該就可以正常顯示分散對齊的效果了：