0

我有以下问题：我运行一个博客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;}

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

4

4 回答 4

3

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

于 2013-09-04T16:44:37.617 回答
1

使用填充来移动图像的方式是使元素变大。因此，Tumblr 链接涵盖了 Twitter 链接和 G+ 链接，而 Twitter 链接也涵盖了 G+ 链接。由于您使用的是 Tumblr（以及其他类似的 110 像素和 30 像素）而不是更改左侧填充，因此position:absolute;您可以简单地说，这将重新定位元素而不放大它。left:190px;

于 2013-09-04T16:45:21.750 回答
0

每个跨度的填充与其他元素重叠，并阻止您单击它们。

作为一个快速修复，你可以摆脱这个

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

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

于 2013-09-04T16:46:28.587 回答
0

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

#header {
    position: relative;
}
#socialmediag, #socialmediatw, #socialmediatu {
    top: 70px;
    position: absolute;
}
#socialmediag {
    left: 30px;
}
#socialmediatw {
    left: 112px;
}
#socialmediatu {
    left: 190px;
}
于 2013-09-04T16:50:00.050 回答