Horizontally Aligning List Items (li) Within An Unordered List (ul)

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

🚫 Wrap Code📋 Copy
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 😊 "Diary Of Insights: A Documentation Of My Discoveries"