Question

我遇到以下问题：我运行了一个博客http://androidawesomeness.com，我的headerlogo下面有三个社交媒体帐户图片。我希望所有图片都链接到相关的社交媒体帐户，但我似乎只能获得一个可点击/可链接的图像，而其他两个图像则没有。

你们可以帮帮我，告诉我这是什么问题吗？这是我的HTML：

<span id="socialmediag">
 <a href="https://plus.google.com/109829575107956373311">
  <img src="http://f.cl.ly/items/3M1z0a0t08293Y1L3k0u/google-plus-logo-aa.png" alt="google-plus-logo" width="15" height="15" />
 </a>
</span>

<span id= 'socialmediatw'>
 <a href="https://www.twitter.com/androidawsumnes">
  <img src="http://f.cl.ly/items/3j1A2V0z3M1O2v0A0B2P/twitter-logo-aa.png" alt="twitter-logo-aa" width="17" height="15" />
 </a>
</span>

<span id='socialmediatu'>
 <a href="http://www.androidawesomeness.tumblr.com">
  <img src="http://f.cl.ly/items/320c1g0n39060j091l2g/tumblr-logo-aa.png" alt="tumblr-logo-aa" width="15" height="15" />
 </a>
</span>

这是我的CSS：

#socialmediag{
position: absolute;
padding: 8px 3px 0px 30px;}

#socialmediatw{
position: absolute;
padding: 8px 3px 0px 110px;}

#socialmediatu{
position: absolute;
padding: 8px 3px 0px 190px;}

谢谢！注意：我对此很陌生，所以请温柔地对待我。

Answer 1

这是因为你正在使用填充来定位。这会改变元素的实际大小，因为你是绝对定位，它们会重叠，最后一个位于其他元素的前面（所以它们不是'可点击的'）。快速修复是将填充更改为边距。更好的解决方法是删除填充并替换为top: 8px;和left: your-left-padding-value-for-this-element;。

Answer 2

使用填充移动图像的方式是使元素更大。因此，Tumblr链接覆盖了Twitter链接和G +链接，Twitter也覆盖了G +链接。由于你正在使用position:absolute;，你可以简单地为Tumblr说left:190px;（对于其他人来说类似110px和30px）而不是更改左边的填充，并且这将重新定位元素而不放大它。 / p>

Answer 3

每个span的填充都是相互重叠的元素，并阻止你点击它们。

作为一个快速解决方案，你可以改为使用

#socialmediag{
  position: absolute;
  padding: 8px 3px 0px 0px;
  margin-left:30px;
}
#socialmediatw{
  position: absolute;
  padding: 8px 3px 0px 0px;
  margin-left:110px;
}
#socialmediatu{
  position: absolute;
  padding: 8px 3px 0px 0px;
  margin-left:190px;
}

但说实话，你根本不需要绝对定位那就是造成这个问题的原因，我建议不要使用它。

修改

虽然我可以看到你的页面在使用中有相当多的绝对定位，所以我猜你使用其他方面并不舒服，这很好。

但为了清楚起见，你可以将一个类应用于所有3个元素，它会产生相同的效果，就像这样。

.socialmedia { float:left; margin: 10px 45px 0px 20px; }

我建议使用浮点数，特别是如果你是新手，因为它会为你节省很多时间！

Answer 4

删除您编写的样式，并在CSS中的任何位置添加以下内容。

#header {
    position: relative;
}
#socialmediag, #socialmediatw, #socialmediatu {
    top: 70px;
    position: absolute;
}
#socialmediag {
    left: 30px;
}
#socialmediatw {
    left: 112px;
}
#socialmediatu {
    left: 190px;
}

不同跨度的图像，1是可点击/可链接的

4 个答案: