How to get html tags to fall on the same line?

Diamoniner12345 0
Viewed 34

I want to write HTML code which displays some text and then, immediately after that, an arrow icon (on the same line).

This is what I have so far:

   
    <h1>hello</h1><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/></svg>

This is what the front end looks like: enter image description here

As seen in the picture, the arrow icon gets automatically placed on a newline. I want it on the same line as the text saying "hello". I've already tried using the nobr tag but that didn't seem to do the trick. Thanks.

html
3 Answers

You could wrap it in a div which has a flex styling

   
    <div style="display: flex; align-items: center;"><h1>hello</h1><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/></svg></div>

Xiduzo0

You can make the svg an inline element with the style="display: inline;"

<h1>hello</h1><svg sytle="display: inline;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/></svg>
Nate-ar0

The best solution for your problem is to use the flex property: display: flex. and also, you can use the inline property: display: inline.

<div style="display: flex; align-items: center;"> 
 <h1 style="padding: .5rem">
  hello
 </h1>
 <svg   xmlns="http://www.w3.org/2000/svg" 
  width="16" 
  height="16" 
  fill="currentColor" 
  class="bi bi-arrow-right-circle" 
  viewBox="0 0 16 16"
 >
  <path 
    fill-rule="evenodd" 
    d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"
   />
 </svg>
 </div>

MAKSTYLE1190
Related