[FIXED] Placing logo with links inline

Issue

I am trying to place two logos with links inline in HTML in a jupyter notebook but couldn't get it working proprly.

<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
        <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/, width=150, height=150/></a>

<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
    <img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder"/, width=150, height=150/></a>

What I have tried so far?

1. I tried to put the logo in a div and then tried to align it to left using css
2. I tried to place the logo with link in a list

None of them worked! The logos right now looks like this

What I am trying to achieve? I want the logo to be inline separated by space placed from left to right

Solution

You can place them inside div with display: flex and disable flex-wrap.

Also do not set both width and height for your images, it can stretch them without keeping the original ration. Only define one property, see snippet.

.logo {
  display: flex;
  flex-wrap: none;
  flex-gap: 1em;
}

/* space between links */
.logo > a {
  margin-right: 6px;
}

/* scale your images like this */
img {
  height: 40px;
}

<div class="logo">
  <a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
    <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"></a>

  <a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
    <img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder" /></a>
</div>

Answered By - Pan Vi