Question

I have some images in the footer, wrapped in tags. For some reason they are not working whatsoever... I am totally lost. website is HERE 任何帮助都会很棒（页脚位于网站的每个页面上）

相关html：

<div class="socialLinks">
  <div class="footerTitle">Follow Us At</div>
  <div class="iconsContainer">
  <a href="https://www.facebook.com/NewWaveAcademyMMA/">
    <img class="socialicon" src="../images/fb.svg">
  </a>
  <a href="https://twitter.com/NewWaveMMA?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">
    <img class="socialicon" src="../images/twit.svg">
  </a>
  <a href="https://www.instagram.com/newwaveacademymma/">
    <img class="socialicon" src="../images/insta.svg"></a>
  </div>
</div>

Answer 1

您网页上的链接有效。您无法单击链接，因为已在链接上放置了一个div。实际上，您是在单击此div，而不是链接。这是div（在浏览器控制台中查找）：

<div class="footercopyright">Copyright, All Rights Reserved NWA 2018</div>

您可以通过删除此div或为链接容器设置更高的z-index来解决此问题。

Answer 2

您的.footercopyright div与页脚的其余部分重叠。

由于您使用浮点对齐.affiliations和.sociallinks div，因此应将它们包装在clearfix中。这样可以清除浮动内容，并防止您的版权div扩大以填充空间。

<div class="footerbox">
  <div class="clearfix">
    <div class="affiliations"></div>
    <div class="socialLinks"></div>
  </div>
  <div class="footercopyright"></div>
<div>

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Answer 3

您可以在下面的课程中添加透明内容和工作。另外，在以下链接中发现了小点的虚线：

您在display:inline-block;上使用<a>删除了此

`.footercopyright {
    position: relative;
    color: #232528;
    max-width: 100%;
    font-size: 10pt;
    text-align: center;
    padding: 5px 0px;
    clear: both;
}`

<a> links simply not working/not clickable

3 个答案: