html - 列表元素左侧的图像

Question

我想要一个列表，每个列表元素的左侧都有不同的图像。这是我目前的代码:http://jsfiddle.net/spadez/t7jCd/8/

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

我的问题是，使用两个跨度类是否是实现此目标的正确方法，因为我已经开始沿着这条路走下去。如果是，我是将图像放在 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/