html - UL 水平菜单上的文本和图像 Sprite

Question

我正在尝试构建一个带有图像 Sprite 和文本的水平菜单

这是我想要但无法用 css 完成的图片。

我的 CSS 看起来像这样。

    #top_menu {
        color: #FFFFFF;
        height: 40px;
        background-color:#222;
        float: right;
    }
    #top_menu ul {
        font-size: 13px;
        margin-top: 13px;
    }
    #top_menu li {
        display: inline;
        list-style-type: none;
        padding-right: 10px;
    }

    .sprite {background:url(images/sprite.png);}
    .transparent {background:url(/images/transparent.png);}
        .contact {height:18px;}


            /*Top menu icons*/
             .sales{width:13px;background-position:-1px -72px;}
             .login{width:13px;background-position:-15px -72px;}
             .forum{width:13px;background-position:-29px -72px;}
                     .livechat{width:13px;background-position:-44px -72px;}

The html part

 <div id="top_menu" class="grid_6">
      <ul id="top_nav">
        <li class="sprite contact sales"><span>Sales:1-800-555-7777</span></li>
        <li class="sprite contact login"><span>Administrator</span></li>
        <li class="sprite contact forum"><span>Forum</span></li>
        <li class="sprite contact livechat"><span>Live Chat</span></li>
      </ul>
    </div>

如您所见，图像位于文本之上，并且还显示了多个图标。 :(

谁能帮我解决这个问题？我不想单独调用每个图标。 非常感谢!

Answer 1

您必须以稍微不同的方式创建 Sprite 。

与其将图标放在旁边，不如将它们放在之上。这样一来，您所要做的就是调整 y 定位以获得您想要的图标。

您可能也有兴趣使用这些工具之一:

http://csssprites.com/

http://spriteme.org/