Расположение заголовков вкладок

Question

Мое требование - чтобы заголовок вкладки располагался рядом с другим заголовком. Пример, подобный изображению ниже

Как это сделать, чтобы реализовать подобное. Это мое демо на stackblitz

HTML

<div class="card">
<ngb-tabset>
  <ngb-tab title="One">
    <ng-template ngbTabContent>
      <p>These tabs are 1</p>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Two">
    <ng-template ngbTabContent>
      <p>These tabs are 2</p>
    </ng-template>
  </ngb-tab>
</ngb-tabset>
</div>

Answer 1

Вы можете использовать css flex и дать align-items: flex-end для выравнивания вкладок вправо.

Пожалуйста, используйте ссылку ниже для демонстрации:

https://jpav8z.run.stackblitz.io/

Надеюсь, это поможет.

Answer 2

Допустим, мы хотим получить тот же результат, что и на рисунке.

1. Я бы изменил структуру HTML, вставив tab-content перед nav-pills. Это имеет больше смысла.
2. Добавление правильных CSS стилей к ngb-tabset

CSS стилей для ngb-tabset

display: flex;
justify-content: space-between;