问题
我正在尝试获得一种效果,我可以在左侧菜单中的导航链接旁边放置图像,所有这些图像都来自单个 sprite 图像。我不确定我应该如何创建我的标记才能正确执行此操作。我希望整个图像和文本都可以点击,以便转到 URL。
可能的解决方案
- 将图片标签放在 ahref 链接的左侧,并将其链接到同一位置。
- 在 ahref 链接上使用带边距的背景图片为其腾出空间
- 使用跨度标签
代码
http://jsfiddle.net/spadez/Z2qE5/
<ul id="sidenav">
<li><a href="#" title="Home" class="active">Dashboard</a></li>
<li><a href="#" title="Home">Dashboard</a></li>
<li><a href="#" title="Home">Dashboard</a></li>
<li><a href="#" title="Home">Dashboard</a></li>
<li><a href="#" title="Home">Account</a></li>
</ul>
最佳答案
我认为http://www.w3.org/wiki/CSS_background_images#Sprites回答你的问题。
他们在 <li> tag
中使用 id然后
#rss span{ background-position: -15px 0;}
#photos span{background-position: -30px 0;}
#links span{background-position: -45px 0;}
关于 Sprite 导航图像的 HTML 和 CSS 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23103809/