In this tutorial I shall show you How to display ul items in a horizontal row. Let’s start the tutorial without wasting your time.
Step 1 – Create a ul with li items.
First of all we need to create an ul with list items as described in the screenshot below.
In the above screenshot you will see the html code of ul and list items. Now let’s see the rendered code in the web browser.
In the above screenshot you can see 5 list items rendered in the web browser.
By default list items are vertically aligned. Let’s change the list items orientation from vertical to horizontal.
Step 2 – Show list items horizontally using CSS
We shall use display inline property to change the orientation of list items. Let’s try it out with CSS.
In the above screenshot you will see I have added a property display inline-block. With this property the items will be shown horizontally in a single row.
Let’s checkout in the web browser to see the results of our code.
In the above screenshot you can see that our items are now horizontally aligned in a single row.
And I have also added margin right of 10 pixels to make them separate items to look prominent.
Now you have successfully learned how to show ul items horizontally in a single row.