? ? 今天給某公司做招聘專頁。早上完成設計圖，下午開始排版。頁面套用了我之前做的某人才局的招聘頁面，導航欄、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（列表項在行外），小圓點就不見了。原來還是因為初始化樣式表，它把 <div> 定義了 overflow: hidden，溢出 <div> 那部分會被切掉。而 <ul> 包含在 <div> 里面，所以 <div> 把溢出的列表項給切掉。這里把 <div> 定義默認的 visible 就行了。

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

總結

以上是生活随笔為你收集整理的(2017.9.27) 自定义列表项 list-style 使用心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。