One reason for wanting to display an ordered list horizontally is for the implementation of pagination. An HTML UL element is a perfect element for creating square-shaped page numbers in a list form by applying different CSS styles.

The code snippet below shows you how to convert the default vertical list to a horizontal one.

Example of list items arranged horizontally

Code for arranging list items horizontally

📋 Copy🚫 Word Wrap
01: 
02: <style>
03: 
04: li {
05:     display: inline-block;
06: }
07: 
08: </style>
09: 
10: <ul>
11:     <li>1</li>
12: 
13:     <li>2</li>
14: 
15:     <li>3</li>
16: </ul>
17: 

Here is another article you might like 😊 "how to add titles to console.table output"