배경 위치가 작동하지 않습니다.

Question

background-position을 사용하는 이상한 문제가 있습니다. 간단히 말해서 작동하지 않습니다!

여기 내 코드입니다 :

<div id="follow-wrapper"> 
    <p>Follow Us</p> 
    <ul> 
     <li><a href="#" id="facebook-img"></a></li> 
     <li><a href="#" id="twitter-img"></a></li> 
     <li><a href="#" id="googlplus-img"></a></li> 
     <li><a href="#" id="linkedin-img"></a></li> 
     <li><a href="#" id="youtube-img"></a></li> 
     <li><a href="#" id="rss-img"></a></li> 
    </ul> 
</div> 

#follow-wrapper ul li { 
    display: inline-block;  
    margin-left:8px;  
    width: 16px; 
    height: 16px; 
    background-image: url('../img/follow.png'); 
    background-repeat: no-repeat; 
} 

#facebook-img{ 
    background-position: 0px 0px; 
} 

#twitter-img { 
    background-position: 0px -26px; 
} 

#googleplus-img{ 
    background-position: 0px -52px; 
} 

#linkedin-img{ 
    background-position: 0px -78px; 
} 

#youtube-img{ 
    background-position: 0px -104px; 
} 

#rss-img{ 
    background-position: 0px -130px; 
} 

그리고 여기 결과입니다 :

Answer 1

앵커 대신 li 태그에 ID를 넣으십시오. 현재 li 태그는 width, background-image 등과 같이 필요한 스타일의 일부를 수신합니다. 앵커 태그는 다른 스타일링 부분 인 배경 위치 정보를받습니다. 이 모든 스타일은 li에 적용되어야합니다.

<div id="follow-wrapper"> 
    <p>Follow Us</p> 
    <ul> 
     <li id="facebook-img"><a href="#" ></a></li> 
     <li id="twitter-img"><a href="#" ></a></li> 
     <li id="googlplus-img"><a href="#"></a></li> 
     <li id="linkedin-img"><a href="#"></a></li> 
     <li id="youtube-img"><a href="#"></a></li> 
     <li id="rss-img"><a href="#"></a></li> 
    </ul> 
</div> 

Answer 2

<a> 링크가 그들에 배경이 없습니다. ID를 <li> 요소로 이동해야합니다. 현재 CSS로 올바른 요소를 타겟팅하지 않습니다.

I.E.

<div id="follow-wrapper"> 
    <p>Follow Us</p> 
    <ul> 
     <li id="facebook-img"><a href="#"></a></li> 
     <li id="twitter-img"><a href="#"></a></li> 
     <li id="googlplus-img"><a href="#"></a></li> 
     <li id="linkedin-img"><a href="#"></a></li> 
     <li id="youtube-img"><a href="#"></a></li> 
     <li id="rss-img"><a href="#"></a></li> 
    </ul> 
</div>