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

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"  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:

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.

CodePudding user response：

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"  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>

CodePudding user response：

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"  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>

CodePudding user response：

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" 
   
  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>