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

Stripe Integration Freelance Gig external link
🔗 See other jobs

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