Question

问题

我试图获得一个效果，我可以在左侧菜单中的导航链接旁边显示图像，所有这些都来自单个精灵图像。我不确定如何正确创建标记。我希望整个图片和文字都可以点击，以便转到网址。

可能的解决方案

将图片标记放在ahref链接的左侧，并将其链接到同一个地方。
在ahref链接上使用带有边距的背景图像为其腾出空间
使用span标记

代码

<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>

Answer 1

我认为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;}

Answer 2

您可以检查执行此操作的bootstrap方式。这是链接http://getbootstrap.com/components/

在那里你可以检查他们做这件事的方法。简而言之，你可以做下面的事情

    <ul id="sidenav">
    <li><a href="yourlink">Link text <span class="icon-class"></span></a></li>
    </ul>

在图标类中定义来自精灵的图像位置。

精灵导航图像的HTML和CSS标记

2 个答案: