社交媒体图标即使在使用display:inline-block之后也不会出现在一行上

Question

我有一个WordPress网站 https://dmarketer.com/我想在一行中显示社交图标，但即使在使用后它们也会垂直显示：

display:inline-block;

.social {
       margin-bottom: 20px;
    }
    .social h4 {
       margin-top: 25px;
       font-size: 15px;
    }
    .social a i {
      padding: 0px !important;
      background: transparent !important;
      font-size: 46px !important;
      margin-left: 5px;
      margin-right: 5px;
    }
    .fa-facebook-square {
      color: #4267b2;
    }
    .fa-facebook-square:hover {
      color: #365899;
    }
    .fa-twitter-square {
      color: #1da1f2;
    }
    .fa-twitter-square:hover {
      color: #1da1da;
    }
    .fa-linkedin-square {
      color: #0084bf;
    }
    .fa-linkedin-square:hover {
       color: #0073b1;
    }
    .fa-instagram {
      color: #d9317a;
    }
    .fa-instagram:hover {
      color: #bc318f;
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="social">
        <h4>Connect with me on below social channels:</h4>
        <a href="https://www.facebook.com/RealMahadev/" target="_blank" itemprop="SameAs">
    <i class="fa fa-facebook-square fb"></i>
    </a>
        <a href="https://twitter.com/realmahadev" target="_blank" itemprop="SameAs">
    <i class="fa fa-twitter-square"></i>
    </a>
        <a href="https://www.linkedin.com/in/realmahadev" target="_blank" itemprop="SameAs">
    <i class="fa fa-linkedin-square"></i>
    </a>
        <a href="https://www.instagram.com/realmahadev/" target="_blank" itemprop="SameAs">
    <i class="fa fa-instagram instagram"></i>
    </a>
    </div>

我正在使用Font-Awsome图标。

Answer 1

您必须删除包含图标的链接之间的<br>标记。

Answer 2

您的代码段中的代码似乎工作正常。不过，我建议在<a>上使用text-decoration: none;。

.social {
  margin-bottom: 20px;
}
.social h4 {
  margin-top: 25px;
  font-size: 15px;
}
.social a {
  text-decoration: none;
}
.social a i {
  padding: 0px !important;
  background: transparent !important;
  font-size: 46px !important;
  margin-left: 5px;
  margin-right: 5px;
}
.fa-facebook-square {
  color: #4267b2;
}
.fa-facebook-square:hover {
  color: #365899;
}
.fa-twitter-square {
  color: #1da1f2;
}
.fa-twitter-square:hover {
  color: #1da1da;
}
.fa-linkedin-square {
  color: #0084bf;
}
.fa-linkedin-square:hover {
  color: #0073b1;
}
.fa-instagram {
  color: #d9317a;
}
.fa-instagram:hover {
  color: #bc318f;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="social">
  <h4>Connect with me on below social channels:</h4>
  <a href="https://www.facebook.com/RealMahadev/" target="_blank" itemprop="SameAs">
    <i class="fa fa-facebook-square fb"></i>
  </a>
  <a href="https://twitter.com/realmahadev" target="_blank" itemprop="SameAs">
    <i class="fa fa-twitter-square"></i>
  </a>
  <a href="https://www.linkedin.com/in/realmahadev" target="_blank" itemprop="SameAs">
    <i class="fa fa-linkedin-square"></i>
  </a>
  <a href="https://www.instagram.com/realmahadev/" target="_blank" itemprop="SameAs">
    <i class="fa fa-instagram instagram"></i>
  </a>
</div>

Answer 3

将display:flex;用于父p标签。这将解决问题。