Open In App

How to prevent line breaks in the list of items using CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items.

Syntax:

element {
display:inline-block;
}

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>preventline break in list items</title>
    <style>
        li {
            display:inline-block;
            text-decoration:underline;
        }
        h1 {
            color:green;
        }
        h1, h2 {
            text-align:center;
        }
        body {
            width:70%;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>display:inline-block;</h2>
    <b>Subjects Of Computer science:</b>
   
    <ul>
        <li>Computer Network</li>
        <li>Operating System </li>
        <li>Data Structure using C</li>
        <li>Object Oriented Programming Concepts</li>
        <li>Digital Electronics</li>
    </ul>
</body>
 
</html>


Output:



Last Updated : 03 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads