我想要一个列表,每个列表元素的左侧都有不同的图像。这是我目前的代码:http://jsfiddle.net/spadez/t7jCd/8/
<li>
<span class="navimg"><span>
<span class="navtxt"><a href="url">User</a></span>
</li>
我的问题是,使用两个跨度类是否是实现此目标的正确方法,因为我已经开始沿着这条路走下去。如果是,我是将图像放在 span 标记内还是将其应用于 span id。
编辑
这就是我想要的:
最佳答案
对于这类问题,我总是建议使用 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;
}
...
一个例子:
关于html - 列表元素左侧的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21480595/