如圖，左邊的項目符號是圖片做的，現在錯位了。怎麼設定圖片的邊距啊？
不用list-style-image 這個屬性
用background: url(1.png) no-repeat 74px;
呵呵的確是用錯了屬性哦，用li背景或者是li a的背景來模擬list-type-image更好一些了，起碼定位沒有那麼困難
嗯。以前沒怎麼用list-type-image，以為它有定位的功能。現在看來還是不行。
有沒有可能讓背景圖片的檔名逐一累加：
例如有10個LI，背景圖片分別從icon1.gif 到icon10.gif，這些背景圖片都是要在li前面顯示。能不能只定義一個CSS實作出來？非得定義10個一個個的呼叫嗎？
/*-----------------------------------.top10-----------------------------------*/
#top10 li {
line-height:160%;
padding-left:24px;
border-bottom:1px #ccc dashed;
width:150px;
overflow:hidden;
}
#top10 a:hover {
color:#C90;
}
#top10 .top1 {
background:url(images/top_1.gif) no-repeat left center;
}
#top10 .top1 a {
color:#06f;
}
#top10 .top1 a:hover {
color:#f60;
}
#top10 .top2 {
background:url(images/top_2.gif) no-repeat left center;
}
#top10 .top2 a {
color:#06f;
}
#top10 .top2 a:hover {
color:#f60;
}
#top10 .top3 {
background:url(images/top_3.gif) no-repeat left center;
}
#top10 .top3 a {
color:#0066FF;
}
#top10 .top3 a:hover {
color:#f60;
}
#top10 .top4 {
background:url(images/top_4.gif) no-repeat left center;
}
#top10 .top5 {
background:url(images/top_5.gif) no-repeat left center;
}
#top10 .top6 {
background:url(images/top_6.gif) no-repeat left center;
}
#top10 .top7 {
background:url(images/top_7.gif) no-repeat left center;
}
#top10 .top8 {
background:url(images/top_8.gif) no-repeat left center;
}
#top10 .top9 {
background:url(images/top_9.gif) no-repeat left center;
}
#top10 .top10 {
background:url(images/top_10.gif) no-repeat left center;
}非要不一個個定義，那就先把10張連成一垂直串，做成一張圖片---->
接下來有兩張方法：
1 .把圖片當作ul的背景，間距+圖片高度=li的line-height。壞處：你得保證li不折行。
2.用js判斷出現的第幾個li，分別賦予對應background-position:*px;裡「*」的值。
--------------------
好處：圖片只需去伺服器上請求一次，這點對大站點來說，是非常重要的。
以上是css：list-style-image中的圖片背景如何設定？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
