Блог

У меня есть 2 вкладки ясности в проекте (ссылка на StackBlitz находится здесь).

И я хотел бы добавить padding-left свойство Tab1 (саму метку вкладки, а не содержимое), чтобы было немного места. Используя инструменты разработчика Chrome, я нашел нужный селектор. Это ul.nav элемент внутри clr-tabs .

Но если я добавлю свойство CSS в app.component.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>