Responsive Horizontal List In HTML CSS – Simple Examples

Welcome to a beginner’s tutorial on how to create a responsive horizontal list in HTML and CSS. Creating a list is easy in HTML, but there is just one very annoying problem – Both ordered and unordered list in HTML are vertical by default.

That covers the basics, but let us walk through a few more examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	Horizontal List	Useful Bits & Links
The End

 

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

 

1) SIMPLE HORIZONTAL LIST

THE DEMO

• Doge
• Pupper
• Doggo
• Woofer
• Yapper
• Yipper

 

THE HTML

<ul class="hlist">
  <li>Doge</li> <li>Pupper</li> <li>Doggo</li> 
  <li>Woofer</li> <li>Yapper</li> <li>Yipper</li>
</ul>

That’s right, we do not need to do “anything special” in the HTML to create horizontal lists – Just use the usual <ul> and <ol>.

 

THE CSS

<style>
/* (A) ENTIRE LIST */
.hlist {
  /* (A1) FLEXIBLE BOX */
  display: flex;
  width: 100%;
  /* (A2) REMOVE DEFAULT INDENTATIONS */
  padding: 0;
  margin: 0;
}
 
/* (B) LIST ITEMS */
.hlist li { 
  list-style-type: none; 
  padding: 5px;
}
/*.hlist li { list-style-position: inside; padding: 5px; }*/
</style>

• A – As in the introduction, display: flex is actually all it takes to turn a list into a horizontal layout. But problem is, the vertical list will have some indentation by default – We simply use padding: 0; margin: 0; to remove it.
• B – The list bullets are another problem to deal with. The easiest is to use list-style-type: none to remove them, or use list-style-position: inside if you want to retain it.

 

 

2) RESPONSIVE HORIZONTAL LIST

THE DEMO

• Doge
• Pupper
• Doggo
• Woofer
• Yapper
• Yipper

Go ahead – Resize the window and see it break into 2 items a row on small screens.

 

THE CSS

<style>
/* (A) ENTIRE LIST */
.hlist {
  /* (A1) FLEXIBLE BOX */
  display: flex;
  width: 100%;
  /* (A2) REMOVE DEFAULT INDENTATIONS */
  padding: 0;
  margin: 0;
}
 
/* (B) LIST ITEMS */
.hlist li {
  list-style-type: none;
  box-sizing: border-box;
  padding: 10px;
  background: #ffecec;
  width: 100%; /* Auto spacing */
}
 
/* (C) RESPONSIVE SUPPORT - ON SMALL SCREENS */
@media screen and (max-width: 768px) {
  /* (C1) ALLOW LIST ITEMS TO WRAP TO NEW ROW */
  .hlist { flex-wrap: wrap; } 
  /* (C2) 2 ITEMS PER ROW */
  .hlist li { width: 50%; }
}
</style>

This is pretty much an improved version of the simple horizontal list, with responsive support for mobile devices.

• A – No difference, still the same display: flex list.
• B – To equally space the list items equally, we add .hlist li { width: 100%; }
• C – Styles for the small screen. Basically, breaking into 2 items per row.

 

 

 

INFOGRAPHIC CHEAT SHEET

 

LINKS & REFERENCES

• CSS Flex – MDN
• List Style – CSS Tricks
• Looking to create a horizontal menu using the list? Check out my Hamburger Menu tutorial.