在使用 CSS 时，有些时候显而易见的方法不能产生你所期望的效果。幸运的是，如果你朝显而易见方法的更远处看，并尝试其它一些方法，你还是很有机会实现你想要的效果的。我最近正遇到了与这一模一样的情况，需要寻找一种方法在链接列表的每个项旁边添加一个图标，即图A所示的效果。
显而易见方法存在的问题
因为链接一般标记为一个无序列表，一个很显然直接的方法是使用一个图像文件（即你需要的图标）替代每个列表项前面的项目符号标记。这种方法只要创建一个样式指定 list-style-image属性。如果每个列表项包含一个独立的 id，那么你可以为每个 id 创建一个独立的样式，以使每个列表项具有不同的图标。
这种方法很简单，而且在某种程度上效果不错，在图B中可以看到其效果。如果图标比文本高（在这个例子中就存在这种情况），那么还会出现一些对齐问题，但是真正的问题是图标不是链接的可点击部分，因为项目符号是与列表项的文字相互独立的框。
多数访问者不会注意项目符号旁边的项目符号是否可以点击，但是图标却不同。图标看上去更像按钮，所以访问者可能会尝试点击它们；因此，如果点击图标不能产生与点击链接的文字部分一样的效果，用户就会感到混乱和失望。
在花时间尝试将链接的可点击部分扩展到项目符号/图标之后，我对list-style 属性的限制感到很失望，并开始寻找替代方案。我发现一些参考资料使用 display marker以更灵活的定位选项创建项目符号。然而，因为主流的浏览器不支持 CSS 规范的特定部分，所以那并不是一个实际可行的方案。（可能会有一天我们将能够使用 CSS 提供的所有工具，但是那一天还没有到来。）
一种可行的替代方案
在显而易见的方法因为存在一个问题不能使用时，就要开始寻找其它方法了。Simple Bits 的Dan Cederholm 的一篇文章使我想到了一种专门针对这种特定挑战的替代方案。
他的方法是将图标作为每个列表项的背景图像，而不是将图标作为项目符号添加进去。基本上这与创建混合型图形/文字按钮使用的方法相同，混合型图形/文字按钮使用的方法是对一个按钮的背景图像应用由 CSS 编排样式的文字。
两者的不同之处是图标图像不填充列表项目的整个背景。相反，它位于列表项框的左边缘，而且 padding 属性将列表项的文字推向右方，位于图标图像之后。这个效果与图标浮动于列表项的左边的视觉效果一样，但是图标是位于每个列表项框之内的，而且可以使用 display:block使得整个框都可点击。这就解决了图标不可点击的问题。
下面的代码创建了你在图A中展示的效果。标记内容就是一个简单的无序链接列表，每个列表项有一个独立的 id 属性。
