将精灵图标添加到标签.有没有办法为精灵设置宽度/高度,为标签设置第二个w/h？

Question

这可能是一个新手问题,但是可以在带有文本的标签上添加精灵图标吗？

例如:

<label class="icon">labeltext</label>

<style>
 .icon {
    width: 30px
    height: 30px;
    background: url("icon.png") no-repeat scroll 0 0 transparent;
 }
</style>

当我将宽度设置为30px时,整个文本不显示.有没有办法在div/label/span中有一个精灵图标和一个文本？

我的真实代码看起来更像这样

<span class="additional-background">
    <span>text text text text</span>
</span>

如果我在精灵图标的附加背景上设置宽度/高度,则无法在文本范围内看到文本.如果我在文本范围内设置宽度,我就无法在"附加背景"上进行点击事件.

另外 我需要设法在图标上设置点击事件,而不是文本

Answer 1

试试这个:

HTML

<label class="icon">labeltext</label>

CSS

.icon {
  display: inline-block;
  line-height: 30px;
  padding-left: 30px;
  background: url("icon.png") no-repeat scroll 0 0 transparent;
}