我的联系div上的四个链接中的两个不起作用

Question

在我的联系人GIF上，我使用社交媒体符号作为我社交媒体网站的链接，然而，Twitter和GitHub链接无效，我无法弄清楚原因。 Facebook和CodePen链接确实有效。也有更好的方法正确排队和组织这里的链接，以便他们可以保持更一致？网站，如果你想看看自己misaelalopez.com。谢谢你的帮助！

#contact 
{
  background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
  height: 250px;
  padding: 300px;
  margin: 0 auto;
  background-size: cover;
  
}

#contact h1  
{
  color: white;
  position: relative;
  text-align: center;
}

#contact h2 
{
  color: white;
  position: relative;
  text-align: center;
}

.facebook
{
  position: relative;
  float: left;
}

.twitter
{
  position: relative;
  left: 50px;
  float: left;
}

.instagram
{
  position: relative;
  left: 100px;
  float: left;
}
.gitHub
{
  position: relative;
  left: 150px;
  float: left;
}

.codePen
{
  position: relative;
  left: 200px;
}

 <div id="contact">
    <div class="Content">
        <div class="facebook">
          <a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png"></a>
        </div>
        
        <div class="twitter">
          <a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png"></a>
        </div>
        
        <div class="instagram">
          <a target= "_blank" href= "https://www.instagram.com/misael2590/?hl=en"><img src= "http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram"></a>
        </div>
        
        <div class="gitHub">
          <a target= "_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub"></a>
        </div>
        
        <div class="codePen">
          <a target= "_blank" href="https://codepen.io/misael25900/"><img src= "http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen"></a>
        </div>
        <br>
        <h1>Reach out to me!</h1>
        <h2>Email me at Misael25900@gmail.com</h2>
    </div>
  </div>

Answer 1

试试这个..

#contact 
{
  background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
  height: 250px;
  padding: 300px;
  margin: 0 auto;
  background-size: cover;
  
}

#contact h1  
{
  color: white;
  position: relative;
  text-align: center;
}

#contact h2 
{
  color: white;
  position: relative;
  text-align: center;
}

.facebook
{
  position: relative;
  float: left;
}

.twitter
{
  position: relative;
  left: 50px;
  float: left;
}

.instagram
{
  position: relative;
  left: 100px;
  float: left;
}
.gitHub
{
  position: relative;
  left: 150px;
  float: left;
}

.codePen
{
  position: relative;
  left: 200px;
  float: left;
}

<div id="contact">
    <div class="Content">
        <div class="facebook">
          <a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png" width="20px" height="20px"></a>
        </div>
        
        <div class="twitter">
          <a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png" width="20px" height="20px"></a>
        </div>
        
        <div class="instagram">
          <a target= "_blank" href= "https://www.instagram.com/misael2590/?hl=en"><img src= "http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram" width="20px" height="20px"></a>
        </div>
        
        <div class="gitHub">
          <a target= "_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub" width="20px" height="20px"></a>
        </div>
        
        <div class="codePen">
          <a target= "_blank" href="https://codepen.io/misael25900/"><img src= "http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen" width="20px" height="20px"></a>
        </div>
        <br>
        <h1>Reach out to me!</h1>
        <h2>Email me at Misael25900@gmail.com</h2>
    </div>
  </div>

Answer 2

链接“不起作用”，因为您以错误的方式排列divs。它们相互重叠。因此，codepen div与twitter，instagram，github链接重叠。因为它位于它们之上＆gt;你设置left:200px从左边移动codepen div 200px，但由于它没有像其他人一样floaT:left，它默认宽度：100％，其中100％是整个{的宽度{1}}

如果将float：left设置为div，则不是排列它们的方法。你需要设置一个宽度。有5个div，即100％/ 5 = 20％。而且因为你需要它们之间的某些边距（空格），你可以使用#contact .content，如下所示。

calc()上的padding:300px也是一个非常糟糕的主意。我不知道你想要实现的目标。无论如何，我也改变了

（也改变了你的html，因为使用#contact从文档中的默认浮点数中获取元素）

所有CSS样式都位于代码的顶部，在HTML中我添加了一个围绕页脚文本的float div

.footer-content

#contact .Content  {
float:left;
width:100%;
}

#contact .Content > div {
  float: left;
  width: calc(20% - 15px);
  margin: 0 7.5px;
}

.footer-content {
  float: left;
  width: 100%;
}

img {
  max-width: 100%
}

#contact {
  background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
  height: 250px;
  padding:300px 30px;
  width:100%;
  margin: 0 auto;
  background-size: cover;
}

#contact h1 {
  color: white;
  position: relative;
  text-align: center;
}

#contact h2 {
  color: white;
  position: relative;
  text-align: center;
}