Open In App

How to make div elements display inline using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn the different approaches to displaying div elements inline. This will allow them to take available space horizontally on the screen in a line.

First, we will create a basic HTML code for the div elements and apply different CSS styling to make it display inline.

CSS properties:

In this article, we will use below CSS properties.

  • Display: We will use display: flex and display: inline-block property to show div elements inline.
  • Float: We will use the float: left property to show div elements side by side.

Approach 1: In this approach, we have set the display: flex and flex-direction: row to the parent div of all the div elements. Due to the flex-direction: row property all the elements inside the parent div will be shown in a single row.

Example: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .main {
            display: flex;
            flex-direction: row;
            font-size: 30px;
            color: green;
            border: 4px dashed green;
            padding: 5px;
            width: 400px;
        }
 
        .main div {
            border: 2px solid red;
            margin: 10px 20px;
            width: 100px;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div>Geeks</div>
        <div>for</div>
        <div>Geeks</div>
    </div>
</body>
</html>


Output:

 

Users can see that all div elements inside the parent div are displaying inline.

Approach 2: In this approach, we will apply the display: inline-block property to all the div we need to display inline. The display:inline-block property will set all div elements side by side.

Example: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            display: inline-block;
            color: green;
            border: 2px solid red;
            margin: 10px 20px;
            width: 120px;
            font-size: 40px;
        }
    </style>
</head>
 
<body>
    <div>Geeks</div>
    <div>for</div>
    <div>Geeks</div>
</body>
</html>


Output: 

 

Users can see all div elements displayed inline. 

Approach 3: In this approach, we will apply the float: left property to all the div elements to display them inline. Also, users can use the float: right CSS property to show all div elements in reverse order from the right side.

Example: In this example, we are using the above approach.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            float: left;
            color: green;
            border: 2px solid red;
            margin: 10px 20px;
            width: 120px;
            font-size: 40px;
        }
    </style>
</head>
 
<body>
    <div>Geeks</div>
    <div>for</div>
    <div>Geeks</div>
</body>
</html>


Output: 

 

Users can see in the below output image how all div elements look when we apply the float: left CSS property to all div elements.

Approach 4: In this approach, we will use the span element instead of the div element. When the user needs to write only text inside the div tag, they can use the span tag as all span elements render inline by default.

Example: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        span {
            color: green;
            border: 2px solid red;
            margin: 10px 20px;
            width: 100px;
            font-size: 30px;
        }
    </style>
</head>
 
<body>
    <span>Geeks</span>
    <span>for</span>
    <span>Geeks</span>
</body>
</html>


Output: In the below output image, users can see how the span element renders inline.

 

In the below output image, users can see how the span element renders inline.



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