0

我在这里有这个网站：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;
}

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

4

3 回答 3

1

可点击区域的大小取决于a标签的内容。您的 a标签没有任何内容。一种解决方案是将背景图像直接应用于a标签并将显示属性更改为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，因为默认情况下锚标记是内联元素。width和height属性只对块元素有影响。

于 2013-07-21T21:48:14.580 回答
0

这是因为您在 li 元素上设置了 padding-left

于 2013-07-21T21:27:44.327 回答
0

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

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

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

于 2013-07-21T21:28:30.030 回答