Question

我无法让我的图像彼此相邻（即使显示：内联块）我该怎么办？

HTML＆amp; CSS代码：

＆＃13;

.emb-web-links {
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: 30px;
  padding-right: 20px;
}
.icons {
  display: inline-block;
}

＆＃13;

<div class="emb-web-links" style="width: 26px;display:inline-block">
  <a style="text-decoration:     underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://www.facebook.com/ifarmaciascom/?fref=ts" class="icons">
    <img style="border: 0;" src="https://i8.createsend1.com/static/eb/master/13-the-blueprint-3/images/facebook.png" target="_blank" width="26" height="26" />
  </a>

  <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://twitter.com/ifarmaciaspt" class="icons">
    <img style="border: 0;" src="https://i9.createsend1.com/static/eb/master/13-the-blueprint-3/images/twitter.png" target="balnk" width="26" height="26" />
  </a>

  <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://vimeo.com/user22709514/videos/">
    <img style="border: 0;" src="https://i10.createsend1.com/static/eb/master/13-the-blueprint-3/images/youtube.png" target="_blank" width="26" height="26" />
  </a>

  <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color:  #fff;" href="https://pt.linkedin.com/company/ifarmacias-com" target="_blank">
    <img style="border: 0;" src="https://i3.createsend1.com/static/eb/master/13-the-blueprint-3/images/linkedin.png" width="26" height="26" />
  </a>
</div>

＆＃13;

Answer 1

从width: 26px;删除内联样式.emb-web-links。

您正在约束图标可以排列的宽度/区域。

理想情况下，您不希望使用内联CSS样式。虽然我假设此代码不是最终的，并且您最终会将内联CSS移动到关联的.emb-web-links和.icons类。

Answer 2

删除内联CSS宽度

＆＃13;

.emb-web-links {
  display: inline-block;
  overflow: hidden;
  padding-right: 20px;
}
.icons {
  display: inline-block;
}

＆＃13;

<div class="emb-web-links">
  <a style="text-decoration:     underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://www.facebook.com/ifarmaciascom/?fref=ts" class="icons">
    <img style="border: 0;" src="https://i8.createsend1.com/static/eb/master/13-the-blueprint-3/images/facebook.png" target="_blank" width="26" height="26" />
  </a>

  <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://twitter.com/ifarmaciaspt" class="icons">
    <img style="border: 0;" src="https://i9.createsend1.com/static/eb/master/13-the-blueprint-3/images/twitter.png" target="balnk" width="26" height="26" />
  </a>

  <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://vimeo.com/user22709514/videos/">
    <img style="border: 0;" src="https://i10.createsend1.com/static/eb/master/13-the-blueprint-3/images/youtube.png" target="_blank" width="26" height="26" />
  </a>

  <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color:  #fff;" href="https://pt.linkedin.com/company/ifarmacias-com" target="_blank">
    <img style="border: 0;" src="https://i3.createsend1.com/static/eb/master/13-the-blueprint-3/images/linkedin.png" width="26" height="26" />
  </a>
</div>

＆＃13;

无法在HTML页面中将图像显示在彼此旁边

2 个答案: