How to make div elements display inline using CSS ?
In this article, we will learn the different approaches to making div elements display 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.
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.
Users can see that all div elements inside the parent div are displaying inline.
Approach 2: In this approach, we will apply display: inline-block property to all the div which we need to display inline. The display:inline-block property will set the all div elements side by side.
Users can see all div elements displaying 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 if they want to show all div elements in the reverse order from the right side.
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.
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.