显示全高的Html sprite

Question

我有一个div，我有一个加号图标来展开视图。当用户将鼠标悬停在该图标上时，该图标将移动到绿色版本。

我现在添加了一行额外的文本，但现在显示了完整的图标。我不确定如何设置高度，只允许显示图标的拳头部分。

<div class="span-5 roomtitle">
   <a href="#">Classic Double Room</a>
   <br>Sleeps: 2
</div>

css：

.roomtitle {
            background: url("../images/icons/icon_add.gif") no-repeat scroll 0 0 transparent;
            color: #990000;
            line-height: 14px;
            padding-left: 25px;
            }

Answer 1

将精灵放在链接中，而不是div中：

.roomtitle { 
    color: #990000; 
    line-height: 14px; 
}
.roomtitle > a {
    display: inline-block;
    height: 14px;
    background: url("../images/icons/icon_add.gif") no-repeat scroll 0 0 transparent; 
    padding-left: 25px; 
}

工作演示：http://jsfiddle.net/gilly3/U285K/

Answer 2

这里有两个选项：

1)您可以更改精灵，使每个图像之间有一个间隙(不是很好)

2)在.roomtitle目录中添加一个跨度，并在其中添加精灵。(这是我通常采取的方法)

.roomtitle{
    width:25px;
    height:25px;
    background:url("../images/icons/icon_add.gif") no-repeat scroll 0 0 transparent;
    float:left;
    display:block;
}