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