Question

我有一个非常复杂的问题。我的UL里面有一些LI。

我需要在LI元素之前插入一个排序图标。

图标需要分为两部分，一个是简单形状的PNG图像，另一个是动态背景颜色的外形。

具体来说它应该是一个圆形的圆圈，里面有一个简单的图标。圆圈背景需要能够随代码更改。

我现在解决它的方法是在LI元素中使用SPAN并设置：

height: 20px;
width: 20px;
background: url(icon.png) 2px 2px no-repeat red;
border-radius: 20px

问题是我必须在每个LI中放置一个SPAN，这不是一个选项。我需要以某种方式解决这个问题，所以我有一个“干净”的UL，里面只有LI。

这就是我现在所拥有的：

<ul>
<li><span></span>Some text</li>
</ul>

虽然里面除了LI和文本之外不能有任何其他元素，所以我需要它看起来像这样：

<ul>
<li>Some text</li>
</ul>

任何帮助表示赞赏！提前谢谢！

Answer 1

我会使用css sprites。 http://jsfiddle.net/mCGXv/

Answer 2

使用CSS sprites。

当您在li左侧添加图标时，请确保增加padding-left的{{1}}，您应该没问题。我附加了一个可以帮助你的资源。