html - 如何更改药丸的 CSS？ ( Angular 2)

Question

我在我的第一个网站上使用了 Angular2 和 ng-bootstrap 中的 ng-tabset，到目前为止它已经成功运行。

但是，我现在卡住了:我无法改变药丸的样式，它们看起来像这样:

但我希望他们像这样:

看起来很简单，我只需要将它们水平显示并设置一个红色背景即可!

这是我的代码:

<ngb-tabset type="pills" orientation="horizontal">
<ngb-tab title="BN™ II">
    <ng-template ngbTabContent>
        <p>first visit</p>
    </ng-template>
</ngb-tab>
<ngb-tab title="BN ProSpec®">
    <ng-template ngbTabContent>
        <p>tab 2</p>
    </ng-template>
</ngb-tab>
<ngb-tab title="IMMAGE®">
    <ng-template ngbTabContent>
        <p>tab 3</p>
    </ng-template>
</ngb-tab>
</ngb-tabset>

我只能通过将此添加到我的 css 文件来更改元素符号的颜色:

ngb-tabset {
    color: orange;
}

Answer 1

更新:

感谢网站链接能够重新创建您想要的内容。添加此 CSS，它将起作用。

旧:

请找到如何应用 CSS 的示例，我尽力复制图像，您可以在 Plunkr 中的 style.css 中找到样式/p>

Plunkr Demo

CSS:

ul.nav-pills .nav-item {
    display: inline;
}

ul.nav-pills .nav-item > a {
    padding: 4px 35px;
    margin: 4px 5px;
    color: black;
    text-decoration: none;
}

ul.nav-pills .nav-item > a.active {
    background-color: maroon !important;
    color: white;
}