CODEWITHSUNDEEP
htmlcss
manu p
manu p

Reputation: 985

How to put inline elements in a row?

Is there a way to make these elements inline in a row?

<h3 style="margin-left:8vh">category</h3><h3 style="margin-left:8vh">category</h3>

Right now, they appear one above the other. Can we arrange them to be next to each other on a row?

Upvotes: 0

Views: 180

Answers (1)

PeterJames
PeterJames

Reputation: 1353

You can add display:inline-block; to the elements themselves:

<h3 style="margin-left:8vh; display:inline-block;">

Or you can use flexbox. With flexbox, wrap the two elements in a div and apply the inline styles on the div:

<div style="display:flex; flex-direction: row; ">

<p>display:inline-block;</p>
<h3 style="margin-left:8vh; display:inline-block;">category</h3>
<h3 style="margin-left:8vh; display:inline-block;">category</h3>

<p>display:flex; flex-direction: row;</p>
<div style="display:flex; flex-direction: row; ">
  <h3 style="margin-left:8vh">category</h3>
  <h3 style="margin-left:8vh">category</h3>
</div>

<p>display:flex; flex-direction: row; justify-content: flex-end;</p>
<div style="display:flex; flex-direction: row; justify-content: flex-end;">
  <h3 style="margin-left:8vh">category</h3>
  <h3 style="margin-left:8vh">category</h3>
</div>

<p>display:flex; flex-direction: row; justify-content: flex-end;</p>
<div style="display:flex; flex-direction: row;justify-content: flex-end;">
  <h3 style="margin-left:8vh">category</h3>
  <h3 style="margin-left:8vh">category</h3>
</div>

Upvotes: 1

Related Questions