html - 如何将 p 标签和 span 标签放在一行中

Question

我有一个 p 和 span 标签，我想将它们放在一行中，有人能帮我怎么做吗？

这是我的标签的样子:

#h3 {
  padding: 0;
  margin: 0;
  width: 268px;
  margin-left: 116px;
  font-size: 18px;
  color: #369;
  font-weight: bold;
}

#heart {
  color: grey;
  font-size: 15px;
  margin-left: 210px;
}

.close {
  font-size: 18px;
  margin-left: 26px;
  padding: 0px;
}

<p id="h3">
  thiss is me
</p>
<span><i class="fa fa-heart" id="heart"></i><span class="close">x</span></span>
<!--i have a heart icon -->

我想在一行中设置所有这些，但是在我的代码中，当我尝试在 p 标记中添加更多详细信息时，所有这些其他 #heart 和 .close 沿途下降。

谁能帮忙，这样无论内容是什么，这些heart和close都保持在顶 Angular ，它们的位置不会改变。

Answer 1

希望这能解决您的问题。谢谢。

#h3 {
  padding: 0;
  margin: 0;
  width: 268px;
  margin-left: 116px;
  font-size: 18px;
  color: #369;
  font-weight: bold;
 display: flex; 
flex-direction: row;

}

#heart {
  color: grey;
  font-size: 15px;
   
   
}

.close {
  font-size: 18px;
 
  padding: 10px;
}

<p id="h3">
  this is me .Check this out .What I have done.This answer solved my problem <span><i class="fa fa-heart" id="heart"></i><span class="close">x</span>
</p>
   
<!--i have a heart icon -->