Open In App

How to make a display in a horizontal row ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn about how to make a ul element display in a horizontal row. For displaying the unordered lists in horizontal style we can make use of display: inline; property.

The Display property in CSS defines how the components(div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page. 

  • inline: It is used to display an element as an inline element.

Syntax: 

display: value;

Example: In the below example we will make use of the inline CSS property to display an unordered list in a horizontal row.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>GeeksforGeeks</title>
    <style>
        body {
            font-size: 20px;
            text-align: center;
        }
        li {
            display: inline;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h2 style=" color:green;">GeeksforGeeks</h2>
    <div>
        <ul>
            <li>
                Operating System
            </li>
            <li>
                DBMS
            </li>
            <li>
                Computer Networks
            </li>
        </ul>
    </div>
</body>
</html>


Output:

 



Last Updated : 01 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads