Divs使图像上的链接不可点击

Question

我正在尝试在我的网站上的肖像旁边放置Twitter和Facebook图像，但是为了正确定位，我必须使用div。 问题是，当我将div添加到图像和指向它的链接时，div使图像无法被单击并转到链接。 我无法摆脱div，因为这是正确放置图片的唯一方法。 我将在下面发布带有代码的JSfiddle。

JSFiddle： http : //jsfiddle.net/HeyItsProdigy/RVUhV/

问题范围： <div id="facebook"><a href="http://www.facebook.com"><img src="fb.png" height="101" width="101" /></a>

Answer 1

问题与您描述的不完全相同。 问题在于您的定位导致您的Twitter元素与其他元素重叠，从而使其无法点击。

不幸的是，没有一个简单的解决方案。 我认为您将不得不重新考虑整个CSS结构，包括消除已弃用的<center>标签以弄清楚这一点。 祝好运。

Answer 2

使用z-index：

#twitter {
    position:relative;
    bottom:290px;
    left:168px;
    z-index: 1;
}
#facebook {
    position:relative;
    top:83px;
    right:168px;
    z-index: 5;
}

jsfiddle

但是，这种CSS样式不应以这种方式使用。 除非使用absolute定位的元素，否则很少使用诸如top ， left ， bottom ， right等规则来进行定位。

您应该研究使用margin和padding以及display属性来定位div。 大部分代码都可以删除。

Answer 3

很抱歉告诉您，但是答案是：编写现代HTML教程！ 您应该尝试Code Academy，他们为初学者和中级提供了直接反馈的交互式课程。 看来您被一本旧的HTML 3/4书困住了，对您没有任何好处。 但是我也为您的链接问题提供了一个直接的答案：在这个小提琴中 ，您将图像作为背景图像包括在内，并且通过有效地使用类和选择器，如果要添加一些内容，则必须写（主要是复制+粘贴）很少的行。 您可以通过以下CSS部分最大程度地发挥作用：

.socialmedia a {
    display: block; /* Because the image is probably higher than the text */
    height: 50px; /* you have to set it to block and height 50px to show the image */
    padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
    padding-top: 12px; /* center in the middle of the image */
    padding-bottom: 12px;
    text-decoration: none;
}

g +示例：CSS：

.g a {
    background: url(logo_g_50x50.png) no-repeat;
}

的HTML

<li class="g"><a href="plus.google.com/meeeeee">+1 me on g+</a></li>

并做了！ 它更易于阅读，甚至更易于维护，以备日后重用或添加