How to make div elements display inline using CSS?

CSS Web Development Front End Technology

CSS stands for cascading style sheets, and it specifies how HTML elements should look in various media, including print, displays, and other print and digital formats. A lot of work is saved via CSS. It can manage the design of several web pages simultaneously.

In this article, we will learn about how to make div elements display inline using CSS, and for that first, we need to look at some CSS properties that are used to make div elements display inline −

Display − The display attribute specifies an element's rendering box type (display behaviour). Here, we will use display: flex, and display: inline-block properties.
Float − Using the float attribute, an element may be told to float to the left, right, or not at all. Here we will use the float left property to display the div floating to the left.
The inline element does not start on a new line and takes only the required width. You cannot set the width and height.

.inline-element {
   display: inline;
   width: 1000px;
   height: 1000px;
}

Here are few elements that default inline property −

span
a
img

Formatting tags which are inherently inline −

em
strong
i
small

Inline-block formatted as an inline element that does not start on a new line. However, you can set the width and height values.

.inline-block-element {
   display: inline-block;
   width: 1000px;
   height: 1000px;
}

The block element starts on a new line and uses all available width. And you can set values for width and height.

Here are few elements that default block property −

div
h1
p
li
section

To make the div components appear inline, we will first build some basic HTML code and apply various CSS styles.

Example

In this example, all the div elements' parent div has the display: flex and flex-direction: row settings set. All the components included within the parent div will be displayed in a single row because of the flex-direction: row attribute.

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

Example

In this example, to all the div that we need to show inline, we shall add the display: inlineblock attribute. All of the div components will be placed side by side if the display:inlineblock attribute is applied.

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

Example

In this example, to show all the div elements inline, we will give them the float: left attribute. Additionally, users can utilize the float: right CSS option to display all div components in reverse order starting from the right.

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

Example

This approach uses span elements instead of div elements. If the user only needs to write text in the div tag, you can use the span tag, since all span elements are displayed inline by default.

<!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>Hello World!</span>
   <span>Hello World!</span>
   <span>Hello World!</span>
</body>
</html>

The main difference from display: inline is that you can use the display: inline block to set the width and height of an element.

Also display: inline block is preserved, top and bottom margins/padding are preserved, but not in display: inline. The main difference from display: block is that display: inlineblock does not add a line break after an element, so an element can be next to another element.

The following snippet demonstrates the different behaviors of display: inline, display: inline-block, and display: block.

span.a {
   display: inline; /* the default for span */
   width: 100px;
   height: 100px;
   padding: 5px;
   border: 1px solid blue;
   background-color: yellow;
}
span.b {
   display: inline-block;
   width: 100px;
   height: 100px;
   padding: 5px;
   border: 1px solid blue;
   background-color: yellow;
}
span.c {
   display: block;
   width: 100px;
   height: 100px;
   padding: 5px;
   border: 1px solid blue;
   background-color: yellow;
}

Inline block to create navigation links

Common Display Usage: Inline blocks are for displaying list items horizontally rather than vertically. The following example creates a horizontal navigation link.

.nav {
   background-color: yellow;
   list-style-type: none;
   text-align: center;
   padding: 0;
   margin: 0;
}
.nav li {
   display: inline-block;
   font-size: 20px;
   padding: 20px;
}