显示完整高度的Html精灵

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)你可以改变Sprite，使每个图像之间有一个间隙(不是很好)

2)在.roomtitlediv中添加一个span，并将精灵添加到其中。(这是我通常采用的方法)

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