选项卡指示器根据文本实现进行了调整

Question

我想根据文本的大小保留标签指示符。

示例：

我应该使用javascript吗？我正在使用Angular。

我的代码html：

<div class="row ranking-wrapper">
    <div class="col s12 tab-cor no-pd">
      <ul class="tabs ranking-tabs tabs-fixed-width tabs-icon">
        <li class="tab col s3">
          <a href="#ranking-nivel1">
            <div>
              <i class="material-icons estrela-tabs tabs-icon">star</i>
            </div>
            <div>
              {{NIVEL1}}
            </div>
          </a>
        </li>
         </ul>
      </div>
</div>

我的CSS

.tabs .indicator {
    background-color:#f6a20d;
    height: 5px !important;
} 

.tab-cor{
    background-color: #5c4438;
    border-bottom: 2px solid #f6a20d;
}

.tabs-icon{
    font-size: 10px;
    overflow: hidden;
}

.tabs-icon i {
    display: block;
    margin-top: 5px;
    margin-bottom: -15px;
    font-size: 10px;
}

Answer 1

您应该在line-height元素中使用a：

.tabs a {
    line-height: 30px;
}