2

我目前正在为我的标签菜单使用精灵图像。问题是图像正在显示，但每个选项卡的标题根本没有出现。如何将图像和标题很好地放置在选项卡内？例子

这就是我的目标：

在此处输入图像描述

这就是我得到的：

在此处输入图像描述

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>

张贴标签.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;
}
4

3 回答 3

3

只需删除您的 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; }

最终结果：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; }
于 2012-08-03T05:32:49.923 回答
2

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

.pngIcon {
    ...
    width: auto;
}
于 2012-08-03T05:25:09.483 回答
1

不声明元素的宽度似乎是您的直接问题。

于 2012-08-03T05:19:25.093 回答