在越來越流行的 DIV+CSS建站模式中，對于首頁或頻道主頁放置的大量欄目或信息列表，普遍采用的是 HTML中的列表類標簽：ul li、ol li、dl dt dd。
對于這些標簽除了可以直接使用CSS BOX MODEL來進行設定，同時還有專有的CSS列表樣式屬性 list-style可以對其默認存在的項目符號進行設定。
list-style的相關設定如下：
list-style-type ：設定列表項目符號的類型。
以下是在CSS1.0版本中支持且目前通用的值：
disc ?? —— 實心圓【無序列表默認值】
circle ??? —— 空心圓
square?? —— 實心方塊
decimal —— 阿拉伯數字【有序列表默認值】
lower-roman ——?? 小寫羅馬數字
upper-roman?? ——?? 大寫羅馬數字
lower-alpha?? ——?? 小寫英文字母
upper-alpha ——?? 大寫英文字母
none —— 不使用項目符號
list-style-image ：設定列表項目符號的自定義圖像。其值是一個引用圖像的URL路徑
url ( url )?? ——?? 使用絕對或相對 url 地址指定圖像
list-style-position：設定列表項目符號的定位和文本對齊方式。
outside —— 默認值。列表項目標記放置在文本以外，且環繞文本不根據標記對齊
inside —— 列表項目標記放置在文本以內，且環繞文本根據標記對齊
一般而言，以上的3種CSS列表屬性足以去修飾和設定基本性的列表，但使用時往往會發現如果使用list-style-image屬性去設定自定義的項目符號時沒辦法去精確定義符號與列表文字之間的空隙和距離。因為并沒有相應的屬性可以控制。那么我們該怎么辦呢？
實際上，如果你瀏覽大多數在這方面表現的不錯的網站時，你會發現那些排列整齊且效果精致的項目符號圖片其實并不是使用list-style-image屬性來定義的，而是換了一個思維，直接對每一行列表項【如li、dt、dd】元素進行背景圖片定位來實現的！
讓我們把這個點子講述的再詳細一些，其思維如下：
1、首先使用 list-style-type : none ; 將列表的默認項目符號消除掉；
2、對每一行顯示信息的 li 增加一個background-image 的設定，將原本用于當作符號的圖像轉型成為其背景；
3、這時候你需要利用更多的CSS背景屬性設置來定義這個“假”的項目符號，比如不讓其重復出現【 background-repeat : no-repeat ; 】、設定精確的背景定位【 background-position : 左至右的距離 上至下的距離 ; 】
4、你會發現背景圖已經乖乖的出現在你想要精確定位的地方了，令人煩惱的是信息文字正好處于其上方，和圖片重疊一起.......
5、 解決這個小問題的方法更為簡單，只需要對你的列表標簽增加一個CSS文本首行縮進屬性【text-indent 】或利用BOX MODEL設定其左側內邊距的距離【padding-left 】即可解決！

總結

以上是生活随笔為你收集整理的利用CSS背景定位实现列表项目符号图像的精确定位(ul,li,自定义项目符号)的全部內容，希望文章能夠幫你解決所遇到的問題。

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