CSS 分散對齊橫列選單項目

在打造網站版面時，有時候為了美觀因素，在網站的主選單會把項目內容分散對齊，讓視覺重心看起來比較平衡。

<nav class="__wrapper">
  <h2 class="__hidden">主選單</h2>
  <ul class="__inline" id="menu">
    <li>News</li>
    <li>Projects</li>
    <li>About</li>
  </ul>
</nav>

.__wrapper {
  width: 960px;
  margin: 0 auto;
}
 
.__hidden {
  display: none;
}
 
ul.__inline {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
 
ul.__inline > li {
  display: inline-block;
}

以上是一個基本的主選單內容，要達成這個目的，以 CSS 一般來說有以下三種作法：

表格排版

#menu {
  width: 100%;
  display: table;
  table-layout: fixed;
}
 
#menu > li {
  display: table-cell;
  text-align: center;
}

表格排版原本就是均分排列的，優點是支援性良好，暫時有個缺點就是如果要增加下拉子項目， Firefox 會遇上 #63895 也就是表格內無法使用絕對定位的問題。

伸縮自在的愛

#menu {
  display: flex;
}
 
#menu > li {
  flex-grow: 1;
  flex-basis: 0;
  text-align: center;
}

CSS3 新提供的必殺技，Flexbox 可以解決不少排版需求，目前的缺點就是須考量瀏覽器支援，即使是號稱支援的 IE11 實作上還是有不少問題。

真正的分散對齊

#menu {
  text-align: justify;
}
 
#menu::after {
  content: '';
  display: inline-block;
  width: 100%;
}
 
#menu > li {
  padding: 0 1em;
  text-align: center;
}

跟前面兩種比較類似於平均打散的排列方式不同，這個作法會把最初與最後的兩個項目貼齊邊緣，通常得另外加上一些間隔會比較好看。

原理上由於文字分散對齊在最後一行不會起作用（雖然有新的 text-align-last 來解決這個問題），所以必須用到 pseudo element 來多墊一行出來。

這個技巧的詳細說明，可以看 MixItUp 作者的文章：Text-align: Justify and RWD。

結論，我個人的作法是先用表格排版，然後再去偵測 Flexbox 的支援。

@supports (display: flex) {
  #menu {
    display: flex;
  }
  #menu > li {
    display: inline-block;
    flex-grow: 1;
    flex-basis: 0;
  }
}

這樣便可以讓 IE 繼續使用表格排版，而和其它瀏覽器還是有看起來相近的效果。

表格排版

伸縮自在的愛

真正的分散對齊

“CSS 分散對齊橫列選單項目” 有 1 則迴響