CSS 自訂欄表項 list-style使用介紹

今天給某公司做招聘專頁。早上完成設計圖，下午開始排版。頁面套用了我之前做的某人才局的招聘頁面，導覽列、banner 很快就出來了。這次內容裡我有些地方用了列表，當然要用 <ul> <li> 標籤。清單項目（小圓點）做成綠色的小正方塊，這時我想是不是有一個 CSS 屬性用來自訂欄表項。 不用不知道，還真有。list-style 其中可定義 list-style-type、list-style-position 和 list-style-image，這三個屬性是可以合在一起寫。list-style-image 正是自訂欄表項圖案。

開始定義他們之前，我遇到了兩個問題：1、 <li> 標籤預設樣式小圓點不見了。查看後發現，初始化樣式表 <ul> 定義了 list-style: none，導致預設的小圓點去掉了。那需要我們把 <ul> 的 list-style 定義一下。2、list-style-position 有兩個可選值：insite 和 outsite，使用 insite （清單項目在行內）沒有問題，但使用 outsite（清單項目在行外），小圓點就不見了。原來還是因為初始化樣式表，它把 <p> 定義了 overflow: hidden，溢出 <p> 那部分會被切掉。而 <ul> 包含在 <p> 裡面，所以 <p> 把溢出的清單項目給切掉。這裡把 <p> 定義預設的 visible 就行了。

可以開始自訂欄表圖案。首先，把圖案從 PS 上切下來儲存在指定位置。定義 list-style-image: url(i/icon.gif)。問題來了，圖案沒有和文字水平置中。百度之，日 <li> 需設定固定高度，設之，無用。仔細再查，原來前人對自訂圖案早有經驗：方案1，在清單項目圖案切圖時包含底下留白，該方案要確保圖案留白與頁面底色一致。我認為此方案不優雅，因為字型可能會變大變小因此，不能複用。方案2，用 background 屬性自訂項目列表圖案。此方案可靈活控製圖案位置，而且文字與圖案之間間距也易於控制，（我不會告訴你用 padding 控制間距）。總結一下，其實初始化樣式表將 <li>預設的小圓點去掉是有其道理。第一，大多情況下，不會用到清單項目。第二，用 list-style 自訂欄表項實在不好控制。