列表元素左侧的图像

Question

我想在每个列表元素的左侧有一个包含不同图像的列表。这是我到目前为止的代码：http://jsfiddle.net/spadez/t7jCd/8/

        <li>
            <span class="navimg"><span>
            <span class="navtxt"><a href="url">User</a></span>
        </li>

我的问题是，正在使用两个span类正确的方法来实现这一点，因为我已经开始沿着这条路走下去了。如果是，我是否将图像放在span标记内或将其应用于span id。

修改

这就是我想要的：

Answer 1

我总是建议解决这些问题的css。

<ul>
    <li>
      <a href="url">User</a>
   </li>
   ...

ul li {
    position: relative;
    list-style: none;
    padding-left: 20px;
}

ul li:first-child:before {
    background: url(...) no-repeat;
    width: 10px;
    height: 10px;
    content: "";
    position: absolute;
    left: 0;
}

ul li:nth-child(2):before {
    background: url(...) no-repeat;
    width: 10px;
    height: 10px;
    content: "";
    position: absolute;
    left: 0;
}



...

一个例子：

http://jsfiddle.net/t7jCd/11/

Answer 2

您有两个HTML元素，格式为<li>和<a>。为什么不在每个上设置背景图像，从而删除多余的代码？

li {
  background: url(image.png) 0 0 no-repeat;
}

li a {
  background: url(image2.png) 0 0 no-repeat;
  display: inline-block;
  margin-left: Xpx;   /*To allow for the image width on the <li>*/
  padding-left: Ypx;  /*To allow for the image width on the <a>*/
}

Answer 3

您可以使用图像标记，因为图像和跨度都是内联元素。

<li>
    <imgclass="navimg" src="" alt="" />
    <span class="navtxt"><a href="url">User</a></span>
</li>