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

Last Updated : 03 Aug, 2023

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:

M

manaschhabra2

Improve

Article Tags :

Similar Reads

CSS word-break vs word-wrap (Overflow Wrap) : What's the Difference ?

In CSS, controlling how long words break at line endings is crucial for clean layouts and good readability. Two properties often confused are word-break and overflow-wrap also known as word-wrap. This guide compares how they handle text overflow and when to use each.word-break Vs. word-wrapPropertyw

How to make div height expand with its content using CSS?

When designing a webpage, it's important to make sure a div adjusts its height based on the content inside it. This is key to creating a flexible and responsive layout, especially when the content changes or is unpredictable. Using CSS, you can easily make a div adapt to different content sizes. One

How to float three div side by side using CSS?

Floating three div elements side by side using CSS means aligning them horizontally in a row. This is done by applying float: left to each div, which moves them to the left of the parent container, allowing them to sit next to each other.These are the following ways to solve this problem:Using the f

How to change color of PNG image using CSS?

Given an image and the task is to change the image color using CSS. Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function. filter: none|blur()|brightness()|contrast()|drop-sh

What is the best way to include CSS file? Why use @import?

CSS property can be include in the HTML page in a number of different ways. HTML documents are formatted according to the information in the style sheet which is to be included.There are many ways to include CSS file which are listed below: External style sheet (Using HTML <link> Tag): Externa

How to style icon color, size, and shadow by using CSS ?

Styling an icon's color, size, and shadow in CSS involves setting the color property for the icon's color, adjusting its size with font-size or width/height, and applying box-shadow or text-shadow for visual depth effects.When using Font Awesome, adding icons is simple and requires no downloads or i

How to set multiple background images using CSS?

The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr

CSS Preprocessor SASS

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that enhances standard CSS by introducing features like variables, nesting, imports, mixins, and inheritance, all while maintaining compatibility with all CSS versions.Key Features of Sass:Variables: Store reusable values such as colors

CSS Website Layout

CSS website layout divides a webpage into multiple sections like header, navigation bar, content area, and footer, making it easier to organize content and build the site.1. Header SectionThe header is the top section of a webpage, typically containing the website's name or logo.html<html>

How to make div not larger than its contents using CSS?

There are three ways to achieve this problem: By default case Using inline-block property Using fit-content property in width and height Default Case: In HTML div is by default fit to content inside it. The example goes like this: Example 1: html <!DOCTYPE html> <html lang = "en"