html为li设置背景图片,css：list

如图，左边的项目符号是图片做的，现在错位了。怎么设置图片的边距啊？

不用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;里“*”的值。

--------------------

好处：图片只需去服务器上请求一次，这点对大站点来说，是非常重要的。