自訂清單項目 list-style 使用小結

    今天為某公司做招募專頁。早上完成設計圖，下午開始排版。頁面套用了我之前做過的某人才局的招募頁面，導覽列、banner 很快就出來了。這次內容裡我有些地方用了列表，當然要用

• 標籤。列表項目（小圓點）做成綠色的小正方塊，這時我想是不是有一個 CSS 屬性用來自訂列表項。 不用不知道，還真有。 list-style 其中可定義 list-style-type、list-style-position 和 list-style-image，這三個屬性是可以合在一起寫。 list-style-image 正是自訂清單項目圖案。

      開始定義他們之前，我遇到了兩個問題：1、

• 標籤預設樣式小圓點不見了。查看後發現，初始化樣式表
  定義了 list-style: none，導致預設的小圓點去掉了。那就要我們把
  的 list-style 定義一下。 2.list-style-position 有兩個可選值：insite 和 outsite，使用 insite （列表項目在行內）沒有問題，但使用 outsite（列表項在行外），小圓點就不見了。原來還是因為初始化樣式表，它把

  定義了 overflow: hidden，溢出

  那部分會被切掉。而

  包含在

  裡面，所以

  把溢出的列表項目切掉。這裡把

  定義預設的 visible 就行了。

      可以開始自訂清單圖案。首先，把圖案從 PS 上切下來保存在指定位置。定義 list-style-image: url(i/icon.gif)。問題來了，圖案沒有和文字水平居中。百度之，日

  • 需設定固定高度，設之，無用。仔細再查，原來前人對自訂圖案早有經驗：方案1，在列表項目圖案切圖時包含底下留白，該方案要確保圖案留白與頁面底色一致。 我認為此方案不優雅，因為字體可能會變大變小因此，不能重複使用。 方案2，用 background 屬性自訂項目清單圖案。 此方案可靈活控制圖案位置，而且文字與圖案之間間距也易於控制，（我不會告訴你用 padding 控制間距）。總結一下，其實初始化樣式表將
  • 預設的小圓點去掉是有其道理。第一，大多情況下，不會用到列表項目。第二，用 list-style 自訂清單項目實在不好控制。

    以上是自訂清單項目 list-style 使用小結的詳細內容。更多資訊請關注PHP中文網其他相關文章！