CSS UL李链接问题

Question

我有这个网站在这里：http://jamessuske.com/freelance/seasons/

在底部你会看到社交媒体图标和我遇到的问题是，当我把我的鼠标移到他们，他们是无法点击，只有当我将我的鼠标向左一点点，我不明白我做错了什么：

HTML

<ul class="social-media"> 
<li class="twitter"><a href="#">&nbsp;</a></li> 
<li class="instagram"><a href="#">&nbsp;</a></li> 
<li class="facebook"><a href="#">&nbsp;</a></li> 
</ul> 

CSS

ul.social-media{ 
    padding-top:30px; 
} 

ul.social-media li{ 
    float:left; 
    padding-left:5px; 
    list-style:none; 
} 

ul.social-media li.twitter{ 
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png); 
    background-position-x:0px; 
    width:25px; 
    height:26px; 
} 

ul.social-media li.instagram{ 
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png); 
    background-position-x:-26px; 
    width:25px; 
    height:26px; 
} 

ul.social-media li.facebook{ 
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png); 
    background-position-x:-52px; 
    width:25px; 
    height:26px; 
} 

任何帮助，将不胜感激。谢谢。

Answer 1

这是因为填充左你li元素

Answer 2

很可能是因为您的联系是如此之小的设置。 试试这个：

.social-media a { 
    display:block; 
    height:100%; 
    width:100%; 
} 

，使其充满整个<li>，站在了精灵。

Answer 3

可点击区域的大小取决于a标签的内容。您的a标记没有任何内容。 一种解决方案是将背景图像直接应用于a标记并将显示属性更改为块。

ul.social-media li.twitter a { 
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png); 
    background-position-x:0px; 
    width:25px; 
    height:26px; 
    display: block; 
} 

请注意，我们还需要设置显示到块自锚标记是默认的内联元素。 宽度和高度属性仅对块元素产生影响。