Markdownで画像を横並びにする

##背景

githubのプロフィールに表示されるREADMEを格好良くするため、https://shields.io で技術系アイコンを作成して並べようとしていました

　ー　アイコン作成はこちらの記事を参考にさせて頂きました

---

##画像が縦並びになる
shields.ioで作成したアイコンのURLをそのまま貼り付けると、以下のように1つずつ改行されてしまう

コードは以下

<img src="https://img.shields.io/badge/-Git-F05032?style=flat-square&logo=git&logoColor=white">
<img src="https://img.shields.io/badge/-Github-181717.svg?logo=github&style=flat-square">
<img src="https://img.shields.io/badge/-Mysql-4479A1.svg?logo=mysql&style=flat-square&logoColor=white">
<img src="https://img.shields.io/badge/-Firebase-FFCA28.svg?logo=firebase&style=flat-square&logoColor=white">
<img src="https://img.shields.io/badge/-Prettier-F7B93E?style=flat-square&logo=prettier&logoColor=white">
<img src="https://img.shields.io/badge/-Eslint-4B32C3.svg?logo=eslint&style=flat-square">
<img src="https://img.shields.io/badge/-R-276DC3.svg?logo=r&style=flat-square">
<img alt="Heroku" src="https://img.shields.io/badge/-Heroku-430098?style=flat-square&logo=heroku&logoColor=white">

---

#解決法

<p> で囲む

<p>
  <img src="https://img.shields.io/badge/-Git-F05032?style=flat-square&logo=git&logoColor=white" />
  <img src="https://img.shields.io/badge/-Github-181717.svg?logo=github&style=flat-square">
  <img src="https://img.shields.io/badge/-Mysql-4479A1.svg?logo=mysql&style=flat-square&logoColor=white">
  <img src="https://img.shields.io/badge/-Firebase-FFCA28.svg?logo=firebase&style=flat-square&logoColor=white">
  <img src="https://img.shields.io/badge/-Prettier-F7B93E?style=flat-square&logo=prettier&logoColor=white">
  <img src="https://img.shields.io/badge/-Eslint-4B32C3.svg?logo=eslint&style=flat-square">
  <img src="https://img.shields.io/badge/-R-276DC3.svg?logo=r&style=flat-square">
  <img alt="Heroku" src="https://img.shields.io/badge/-Heroku-430098?style=flat-square&logo=heroku&logoColor=white">
</p>

##結果
横並びにできた

ちなみに、一つ一つのアイコンの間に隙間がありますが、ピタッとくっつけたい場合は各アイコンの<img>タグ同士を改行せず同じ行に続けて書くと出来ました

こんな感じ