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

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;（其他类似的 110 像素和 30 像素）而不是更改左侧填充，这将重新定位元素而不放大它。

Answer 3

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

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

Answer 4

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

我建议您考虑使用 float，尤其是如果您不熟悉此功能，因为它会在以后为您节省很多时间！