List Inline

by Ankit Patidar

HTML

<div class="list">
  <ul>
    <li>
      <img src="https://www.w3schools.com/tags/img_girl.jpg">
      <p>Hello-1</p>
    </li>
    <li>
      <img src="https://www.w3schools.com/tags/img_girl.jpg">
      <p>Hello-2</p>
    </li>
    <li>
      <img src="https://www.w3schools.com/tags/img_girl.jpg">
      <p>Hello-3</p>
    </li>
    <li>
      <img src="https://www.w3schools.com/tags/img_girl.jpg">
      <p>Hello-4</p>
    </li>
    <li>
      <img src="https://www.w3schools.com/tags/img_girl.jpg">
      <p>Hello-5</p>
    </li>
    <li>
      <img src="https://www.w3schools.com/tags/img_girl.jpg">
      <p>Hello-6</p>
    </li>
    <li>
      <img src="https://www.w3schools.com/tags/img_girl.jpg">
      <p>Hello-7</p>
    </li>
    <li>
      <img src="https://www.w3schools.com/tags/img_girl.jpg">
      <p>Hello-8</p>
    </li>
    <li>
      <img src="https://www.w3schools.com/tags/img_girl.jpg">
      <p>Hello-9</p>
    </li>
    <li>
      <img src="https://www.w3schools.com/w3images/mac.jpg">
      <p>Hello-10</p>
    </li>
    <li>Hello-11</li>
    <li>Hello-12</li>
    <li>Hello-13</li>
    <li>Hello-14</li>
    <li>Hello-15</li>
  </ul>
</div>

CSS

.list{
  overflow: auto;
  background-color: #e4e4e4;
  padding: 10px;
}
.list ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* flex-direction: row; */
}
.list li img{width:100px}