添加 padding-left css 属性到清晰度选项卡标签

Question

我在项目中有 2 个清晰度选项卡（StackBlitz ref 是 here）。

我想将 padding-left 属性添加到 Tab1（选项卡标签本身，而不是内容），这样就会有一些 space。使用 Chrome Dev Tools 我找到了所需的选择器。它是 clr-tabs 中的 ul.nav 元素。

但是如果我像这样在 app.component.css 中添加 css 属性

ul.nav {
  padding-left: 1rem !important;
}

什么都没有真正改变。那么如何将 padding 属性添加到这些选项卡？

Answer 1

首先，创建一个CSS class:

button.tab-button{
  padding: 0 15px;
}

然后，将 class 分配给 HTML 上的每个按钮：

<button clrTabLink id="inputs-link" class="tab-button">Tab1</button>

和

<button clrTabLink id="filters-link" class="tab-button">Tab2</button>

Add padding-left css property to clarity tabs labels