利用CSS背景定位实现列表项目符号图像的精确定位(ul,li,自定义项目符号)

在越来越流行的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 】即可解决！