将padding-left CSS属性添加到“清晰度”标签标签

问题描述

我在项目中有2个清晰度标签（StackBlitz引用为here）。

我想将padding-left属性添加到Tab1（标签标签本身，而不是内容）中，以便有一些空间。 使用Chrome开发工具，我找到了所需的选择器。是ul.nav中的clr-tabs元素。

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

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

什么都没有改变。那么如何向这些标签添加padding属性？

解决方法

首先，创建一个CSS类：

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

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

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

和

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