Я не могу получить свой спрайт 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

не установлены какие-либо единицы на фоне позиции. Установка этого на любой тип устройства заставит его работать. Zero - это значение, которое является исключением из этого правила.

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

См: https://jsfiddle.net/kbrbc62h/

EDIT: В ответ на ваш недавний комментарий, см: https://jsfiddle.net/Ls8wLsa6/

элементы, такие как литий, ул, д * и DIV имеют display:block по умолчанию. Это означает, что эти элементы занимают целую строку. Мы можем установить указанную ширину, но даже контейнер будет помещен в новую строку. Изменяя элементы li, чтобы использовать встроенный блок, мы можем перевести их на одну строку. Поскольку ul имеет фиксированную ширину, каждый третий элемент появится на новой строке.

Мы используем 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; 
}