Responsive Horizontal List In HTML CSS (Very 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 lists 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.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	Horizontal List	Useful Bits & Links
The End

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short 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.

 

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.

 

 

 

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> or <ol>.

 

THE CSS

<style>
/* (A) REMOVE DEFAULT INDENTATIONS & BULLET POINTS */
.hlist { padding: 0; margin: 0; }
.hlist li { list-style-type: none; }
 
/* (B) "CONVERT" TO HORIZONTAL LIST */
.hlist { display: flex; }
</style>

1. First, we remove the default indentations of the <ul> or <ol> with padding: 0 and margin: 0. We can also remove the default bullet points with list-style-type: none.
2. As in the introduction, display: flex is actually all it takes to turn a list into a horizontal layout.

P.S. display: flex will set the layout of the list to a “CSS flexible box”. This is an important layout mechanism in modern CSS, alongside display: grid. I will leave links below if you want to learn more.

 

 

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) HORIZONTAL LIST */
.hlist {
  /* (A1) REMOVE DEFAULT INDENTATIONS */
  padding: 0;
  margin: 0;
 
  /* (A2) FLEXIBLE BOX */
  display: flex;
  width: 100%;
 
  /* (A3) COSMETICS */
  background: #ffecec;
}
 
/* (B) LIST ITEMS */
.hlist li {
  /* (B1) REMOVE BULLET POINTS */
  list-style-type: none;
 
  /* (B2) IF YOU WANT TO KEEP THE BULLET POINTS *
  list-style-position: inside;
 
  /* (B3) DIMENSIONS */
  box-sizing: border-box;
  padding: 10px;
  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>

Don’t need to panic. This is pretty much just an improved version of the simple horizontal list, with responsive support for mobile devices.

1. This is the same “remove default indentation”, and use display: flex to turn the list into a flexible layout.
2. Remove the default bullet points. But to equally space the list items, we add .hlist li { width: 100%; }
3. The @media is called a “media query”. Basically, these “alternate styles” will only apply on the small screen. Long story short, we break into 2 items per row on small screens.

 

 

 

LINKS & REFERENCES

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

 

INFOGRAPHIC CHEAT SHEET