Laura Diaz Laura Diaz - 5 months ago 10
CSS Question

Can't get Images appear next to each other in HTML page

I can't get my images to appear next to each other (even with display:inline-block) what can I do?

HTML & CSS code:



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

<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>




Answer

Remove the inline CSS width

.emb-web-links {
  display: inline-block;
  overflow: hidden;
  padding-right: 20px;
}
.icons {
  display: inline-block;
}
<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>

Comments