How To prevent Line Breaks In The List Of Items Using Css

admin_img Posted By Bajarangi soft , Posted On 09-10-2020

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.

Line Breaks In Css

The display property is used to prevent a line break of a list of items.
Syntax:

element {
    display:inline-block;
} 
Example
<!DOCTYPE html>
<html>
<head>
    <title>preventline break in list items</title>
    <style>
        li {
            display:inline-block;
            text-decoration:underline;
        }
        h1 {
            color: #80006f;
        }
        h1, h2 {
            text-align:center;
        }
        body {
            width:70%;
        }
    </style>
</head>
<body>
<h1>Bajarangi Soft</h1>
<h2>display:inline-block;</h2>
<b>Subjects Of Computer :</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>

Related Post