使用 CSS 自訂清單的項目符號

清單List 的每個項目前，預設的項目符號樣式為圓點 (使用無序號清單 ul)。如果我們想要將圓點符號改成方形符號，只要在 ul 標籤中加上 type="square" 即 <ul type="square"> 就可以了。

• 項目1
• 項目2
• 項目3
• 項目4

如果想要使用自訂的符號，那我們就可以用CSS來完成：

1. 首先將預設的圓點符號取消顯示。
   

   ul {
     list-style: none;
   }

2. 接著加上想要使用的自訂符號圖當背景圖。
   

   li {
     background: url(symbol.gif) no-repeat 0 50%;
     padding-left: 17px;
   }

如果是以 list-style-image 屬性直接指定自訂符號圖，當然是最簡單的方法，可是在某些瀏覽器裡，圖檔與項目文字會有對不齊的問題。所以採用背景圖的方式， no-repeat 是取消預設的背景圖並排，0 50% 是把背景圖放在左邊 0 像素，上面算來 50% 的地方，這樣就能對齊中線。