单行文本的 HTML 标记 vs vs

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 宽度，因此它不会环绕。我是否遗漏了什么...我需要提供 float 或其他方式使其并排放置

Answer 1

像这样将 display:inline 或 display:inline-block 添加到您的 h4 标签

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

或者给你的元素一个类名并添加定义它的样式来像这样显示内联 block

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

.myTitle{display:inline-block;}