CSS Sprites和标签菜单导航样式问题

Question

我目前正在使用精灵图片作为我的标签菜单。问题是图像显示但每个标签的标题根本没有出现。如何将图像和标题放在标签内？ EXAMPLE

这就是我的目标：

这就是我得到的：

HTML

<ul>
<li><a href="#tab-1" class="pngIcon sprite-category">1. Category</a></li>
<li><a href="#tab-2" class="pngIcon sprite-description">2. Description</a></li>
<li><a href="#tab-3" class="pngIcon sprite-images">3. Images</a></li>
<li><a href="#tab-4" class="pngIcon sprite-contact">4. Contact Info</a></li>
<li><a href="#tab-5" class="pngIcon sprite-final">5. Final</a></li>
</ul>

postingtabs.css

.pngIcon {
    padding: 0;
    background-image: url(http://webprolearner.ueuo.com/dropdown-menu/images/tabdetails.png);
    background-repeat: no-repeat;
    height: 32px;
    line-height: 32px;
    text-indent: 40px;
    margin: 0 5px;
    display: block;
}

Answer 1

只需删除css文件中width选择器上的.sprite-*：

你的css：

.sprite-final{  background-position: 0 0; width: 32px; height: 32px; } 
.sprite-category{ background-position: 0 -82px; width: 32px; height: 32px; } 
.sprite-contact{ background-position: 0 -164px; width: 32px; height: 32px; } 
.sprite-description{ background-position: 0 -246px; width: 32px; height: 32px; } 
.sprite-images{ background-position: 0 -328px; width: 32px; height: 32px; }

工作css：

.sprite-final{  background-position: 0 0; height: 32px; } 
.sprite-category{ background-position: 0 -82px; height: 32px; } 
.sprite-contact{ background-position: 0 -164px; height: 32px; } 
.sprite-description{ background-position: 0 -246px; height: 32px; } 
.sprite-images{ background-position: 0 -328px; height: 32px; }

最终结果：demo on dabblet

CSS代码：（我做了一些重构）

li a {
    padding: 0;
    background-image: url(http://webprolearner.ueuo.com/dropdown-menu/images/tabdetails.png);
    background-repeat: no-repeat;
    height: 32px;
    line-height: 32px;
    text-indent: 40px;
    padding: 0 5px;
    display: block;
    text-decoration: none;
}

.nav-category    { background-position: 0px -85px; }
.nav-description { background-position: 0px -248px; }
.nav-images      { background-position: 0px -327px; }
.nav-contact     { background-position: 0px -164px; }
.nav-final       { background-position: 0px 0px; }

Answer 2

在CSS中添加width: auto（感谢Kwon指出问题）。 jsFiddle上的工作示例。

.pngIcon {
    ...
    width: auto;
}

Answer 3

不宣布您的元素宽度似乎是您的直接问题。