[CSS]Menu寫法

我們在寫 Menu 時, 會利用 li tag 來進行, 如下:

<ul>  
  <li>HOME</li>  
  <li>NEWS</li>  
  <li>CATEGORY</li>  
  <li>CONTACT</li>  
  <li>ABOUT US</li>  
</ul>

一般來說, 會需要將原來的 li 前面的符號點去除, 會使用 CSS:

ul {  
  list-style-type: none;  
}

然後在 li 本身的原來預設 display: block 要改為 inline:

li{  
  display: inline;  
}

接下來是需要在每個 menu 中間放個分隔符號如: |

li + li:before  
{  
  content: '| ';  
}

有趣的是最後這個 li + li:before 語法, 可以不用到排列子元素的方式, 而是用緊鄰的方式來選擇, 如此一來, 第一個 li 就不會滿足這個條件, 只有第二個到最後一個可以滿足, 而達成在每個 menu 間下分隔符號.

其他解法尚有:

發佈留言