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