如何将按钮和文本放在同一行？

Question

我想将图标“ Notification”放在同一行中，但是会出现在新行中。

    <button (click)="openPage()">
      <icon name="notifications"></icon> Notification <h1>New</h1>
    </button>

谢谢

Answer 1

我建议您创建一个CSS文件，然后输入display: inline，如下所示。

CSS：

.inline {
    display: inline;
}

HTML：

<button class="inline" (click)="openPage()">
    <Icon and Text placed here></>
</button>

Answer 2

默认情况下，h1是块元素，因此它占用屏幕的整个宽度。您应该使用内联元素，例如span。这是跨度的示例

<button (click)="openPage()">
      <icon name="notifications"></icon> Notification <span>New</span>
</button>

如果您仍然想使用h1，请使用css使其内联元素

#notification {
  display: inline;
}

<button (click)="openPage()">
      <icon name="notifications"></icon> Notification <h1 id="notification">New</h1>
</button>

Answer 3

给出这些元素的样式：display: inline-block或display: inline