我无法让我的css精灵显示出来

Question

我有一组用于酒店设施的图标，我正在尝试使用CSS精灵在我的页面上显示它们。 这就是我对html的看法

<div class="sprite">
            <ul id="amenities">
                 <li class="bathtub"></li>
                 <li class="shower"></li>
                 <li class="next"></li>
                 <li class="tv"></li>
                 <li class="safe"></li>
            </ul>
        </div>      

我的css

.amenities { position: relative; }
.amenities li { margin: 0;  padding: 0; list-style: none; position: absolute; top: 0; }
.bathtub { background: url('graphics/icons.png') no-repeat 0 0; width: 60px; height: 60px;}
.shower { background: url('graphics/icons.png') no-repeat -61 0; width: 60px; height: 60px;}

仅显示第一个图标，第二个图标不显示。 jsfiddle

我需要它看起来

Answer 1

您尚未在背景位置设置任何单位。将此设置为任何类型的单位将使其工作。零是一个值，这是该规则的一个例外。

shower { background: url('graphics/icons.png') no-repeat -61px 0; width: 60px; height: 60px;}

请参阅：https://jsfiddle.net/kbrbc62h/

修改 根据您最近的评论，请参阅：https://jsfiddle.net/Ls8wLsa6/

li，ul，h *和div等元素默认为display:block。这意味着这些元素将占用整行。我们可以设置指定的宽度，但即使容器仍然放在一个新行上。通过将li元素更改为使用内联块，我们可以将它们填充到一行。由于ul具有固定宽度，因此每个第3个元素将出现在新行上。

我们使用vertical-align:top;将li内容与容器顶部对齐，然后调整p标签以在中心显示没有边距的文本。

HTML：

<div class="sprite">
    <ul id="amenities">
        <li><div class="bathtub"></div><p>Bath</p></li>
        <li><div class="shower"></div><p>Shower</p></li>
        <li><div class="kitchen"></div><p>Kitchen</p></li>
        <li><div class="bathtub"></div><p>Bath</p></li>
        <li><div class="shower"></div><p>Shower</p></li>
        <li><div class="kitchen"></div><p>Kitchen</p></li>
        <li><div class="bathtub"></div><p>Bath</p></li>
        <li><div class="shower"></div><p>Shower</p></li>
        <li><div class="kitchen"></div><p>Kitchen Long</p></li>
    </ul> 
</div>  

CSS：

#amenities {
    width:320px;
}

.bathtub {
    background: url('http://i.stack.imgur.com/NdUbQ.png') no-repeat 0 0; width: 60px; height: 60px;
}
.shower {
    background: url('http://i.stack.imgur.com/NdUbQ.png') no-repeat -61px 0; width: 60px; height: 60px;
}

.kitchen {
    background: url('http://i.stack.imgur.com/NdUbQ.png') no-repeat -122px 0; width: 60px; height: 60px;
}

.sprite ul li {
    list-style-type:none;
    display:inline-block;
    vertical-align:top;
    margin:10px;
    width: 60px;
}

.sprite ul li p {
 text-align:center;
 margin:0;   
}