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 則迴響

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *