How to align list side by side?

We can use display: inline-block or float: left for align list side by side (horizontal list)

Horizontal List (float:left)

HTML
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
CSS
ul{
  list-style: none;
}

ul li{
  float: left;
  margin: 10px;
}

Horizontal List (display:inline-block)

HTML
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
CSS
li{
  display: inline-block; 
}

Horizontal List with Bootstrap

<ul>
  <li class="d-inline-block">Item 1</li>
  <li class="d-inline-block">Item 2</li>
  <li class="d-inline-block">Item 3</li>
  <li class="d-inline-block">Item 4</li>
</ul>

DEMO

2,947 Views
30880cookie-checkHow to align list side by side?

Leave a Reply

Your email address will not be published. Required fields are marked *