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

  • 1
  • 2
  • 3

Code for arranging list items horizontally


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 for you 😊 "Javascript: Add days to the current date"