예기치 않게 스프라이트에 줄 바꿈이 나타나는 경우

Question

일부 바닥 글 도구에 일부 스프라이트를 넣으려고합니다. 내가 가지고있는 코드로 스프라이트를 설치할 때, 나는 1 대신에 4 라인에있는 이미지로 끝난다. 내가 코드에서 어디서 잘못 이해했는지 모르겠다.

스프라이트의 HTML은

<div> 
    <a class="calendar-sp" href="http://www.tara.meditationinsantabarbara.org/calendar"></a> 
    <a class="twitter-sp" href="http://www.twitter.com/MahakankalaBC/"></a> 
    <a class="facebook-sp" href="http://www.facebook.com/MahakankalaBuddhistCenter/"></a> 
    <a class="eBooklead-sp" href="http://www.emodernbuddhism.com/"></a> 
</div> 

입니다 그리고 내 스프라이트 CSS는

a.calendar-sp, 
a.eBooklead-sp, 
a.twitter-sp, 
a.facebook-sp 
{ 
    display: inline-block; 
     background-repeat: no-repeat; 
     background-image:url ('http://www.tara.meditationinsantabarbara.org/wp-content/uploads/2012/11/SocialSpriteSheet5.png'); 
} 

a.calendar-sp 
{ 
     width: 184px; 
    height: 175px; 
} 

a.eBooklead-sp 
{ 
    background-position: -184px 0; 
    width: 213px; 
    height: 175px; 
} 

a.twitter-sp { 
    background-position: -397px 0; 
    width: 128px; 
    height: 128px; 
    } 

a.facebook-sp 
{ 
    background-position: -525px 0; 
    width: 128px; 
    height: 128px; 
} 

어떤 제안이나 아이디어가 크게 감상 할 수있다.

또한 내 스프라이트 이미지가 가끔 사라집니다.

Answer 1

모든 버튼이 서로 옆에 있도록 div의 너비를 설정해야합니다. 또한 float : left 또는 float : right를 추가하여 브라우저가 스프라이트가 자신을 찾길 원한다는 것을 알립니다. 그 패션