如何使html标记落在同一行上？

Question

我想要写HTML代码，显示一些文本，然后，紧接着，箭头图标(在同一行)。

到目前为止，这就是我所拥有的：

​

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

​

这就是前端的样子：

​

如图中所示，箭头图标将自动放置在换行符上。我要把它和“你好”的文字放在同一行。我已经试过用势利标签了，但这似乎没起作用。谢谢。

Answer 1

您可以将其包装在具有flex样式的div中。

​

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

​

Answer 2

您可以使用style="display: inline;“使svg成为内联元素；

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

Answer 3

解决问题的最佳解决方案是使用flex属性：display: flex。此外，还可以使用内联属性：display:内联。

​

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

​