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

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

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;
}

请注意，我们还需要将 display 设置为 block ，因为默认情况下anchor标记是内联元素。 width 和 height 属性仅对块元素产生影响。

Answer 2

这是因为您在li元素上设置了填充左侧

Answer 3

可能是因为你的链接太小了。试试这个：

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

所以他们填满整个<li>并站在精灵上。

CSS ul li链接问题

3 个答案: