как поместить кнопку и текст в одну строку?

Question

Я хочу поставить значок «Уведомление» и в той же строке, но отображается в новой строке.

    <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