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: