背景位置不工作

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

将ID放在li标签上而不是锚上。目前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>