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

这里有两个选项：

1）你可以改变精灵，以便每张图像之间有一个间隙（不是很好）

2）在.roomtitle div中添加一个span并将精灵添加到其中。（这是我通常会采取的方法）

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

Answer 2

将精灵放在链接中而不是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/

Html精灵显示全高

2 个答案: