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

Question

我有以下问题:我运行一个博客 http://androidawesomeness.com ，我的标题 Logo 下方有三个社交媒体帐户图片。我希望所有图片都链接到相关的社交媒体帐户，但我似乎只有一张图片可以点击/链接，另外两张不是。

你们能帮我看看是什么问题吗？这是我的 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

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