0

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?

PeterJames
  • 1,137
  • 1
  • 9
  • 17
manu p
  • 952
  • 4
  • 10
  • Does this answer your question? [What is the difference between display: inline and display: inline-block?](https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block) – kmoser Aug 13 '22 at 22:56

1 Answers1

1

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>
PeterJames
  • 1,137
  • 1
  • 9
  • 17