Very Simple Responsive Horizontal List In HTML CSS

Welcome to a tutorial on how to create a responsive horizontal list in HTML and CSS. So you need to create a horizontal list in your project? Maybe to show a list of hashtags? Well, let’s walk through a real quick example – Read on!

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

HTML CSS HORIZONTAL LIST

All right, let us now get into the examples of how to create a horizontal list with HTML and CSS.

 

RESPONSIVE HORIZONTAL LIST DEMO

  • Borf
  • Bonk
  • Doge
  • Pupper
  • Doggo
  • Woofer
  • Yapper
  • Yipper

 

 

PART 1) THE HTML

hlist.html
<ul class="hlist">
  <li>Borf</li> <li>Bonk</li>
  <li>Doge</li> <li>Pupper</li> <li>Doggo</li> 
  <li>Woofer</li> <li>Yapper</li> <li>Yipper</li>
</ul>

There’s nothing “special” here, just use the usual <ul> or <ol>.

 

PART 2) THE CSS – HORIZONTAL LIST

hlist.css
/* (A) "CONVERT" TO HORIZONTAL LIST */
.hlist {
  display: flex;
  flex-wrap: wrap;
  padding: 0; margin: 0;
}
.hlist li { list-style-type: none; }
  • Setting the list to display: flex pretty much does the magic, this will lay out the list items in a horizontal manner.
  • flex-wrap: wrap Allow the list items to break into a new row if it gets too long.
  • padding: 0 margin: 0 Removes the default list indentation.
  • list-style-type: none Removes the default bullet points or numbering.

 

 

PART 3) THE CSS – COSMETICS

hlist.css
/* (B) COSMETICS */
.hlist li {
  margin: 5px; padding: 10px;
  border-radius: 5px;
  color: #fff; background: #2e68bf;
}

Yep, this part is up to you – Set the font size, colors, padding, margin, and whatever else. The end.

 

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a "paid scripts and courses" business, so every little bit of support helps.

Buy Me A Meal Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

EXTRA BITS & LINKS

That’s all for the main tutorial, and here is a small section on some extras and links that may be useful to you.

 

EXTRA) ALTERNATIVE HORIZONTAL LIST

glist.css
/* (A) BIG SCREEN - 4 PER ROW */
.hlist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0; margin: 0;
}
.hlist li { list-style-type: none; }
 
/* (B) SMALL SCREEN - 2 PER ROW */
@media screen AND (max-width: 640px) {
  .hlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

If you want exactly X items per row on the big screens, and Y items per row on small screens – CSS Grid is a better choice.

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

HTML CSS Horizontal List (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

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