单行<i> vs <p> vs </p> <div>上的文本的HTML标记

Question

我有两个文字字段，我想并排显示

  <div class="navbar-header">
    <a class="navbar-brand page-scroll" [routerLink]="['/']" href="#page-top">
      <i class="fa fa-cloud fa-2x " aria-hidden="true"></i> 
      <h4 class="title">My Poems </h4>
    </a>
  </div>

如果<i>使用<h4>，它们会并排存在。我使用(<div>, <p>, <span>)的任何其他标记都放在下一行。

我已经更改了navbar-brand，navbar-header的css宽度，因此它没有环绕。我错过了什么......我是否需要给浮动或其他方式让它并排站立

Answer 1

添加display：inline或display：inline-block到你的h4标签，如下

<h4 class="title" style="display:inline-block">My Poems </h4>

或为您的元素指定一个类名，并添加定义其样式以显示内嵌块，如下所示

<h4 class="title myTitle">My Poems </h4>

.myTitle{display:inline-block;}