Question

我正在尝试构建类似Chrome的标签，该标签可以根据标签的数量为标签动态分配宽度。我有以下CSS类：

.myTab{
   width: 100px;
}

在每个添加新标签或关闭现有标签上，我通过将父div的总宽度除以标签数来计算每个标签的宽度。

这是我的html代码：

<div class="myTabList">
    <div class="myTab" *ngFor="let tab of tabs; let i = index" >
        {{i + 1}}
    </div>

</div>
<button class="btn btn-default addTabButton" (click)="addMyTab()"></button>

现在，对于myTab css类，我想动态更改宽度。一种方法是遍历我的整个选项卡列表并更改宽度。但是我在考虑是否可以仅更改width类的myTab属性。如果可能的话，由于该类适用于所有选项卡，因此无需遍历整个选项卡列表。在CSS中甚至可以更改CSS类的属性吗？

更新我还需要制表符的宽度不超过max-width，以确保当制表符很少时，它们不会占据整个宽度。这就是为什么使用table和table-cell无效的原因。

Answer 1

CSS表可以做到这一点。

.mytab {
  border: 1px solid red;
  height: 25px;
  display: table-cell;
}

.myTabList {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-bottom: 1em
}

<div class="myTabList">
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
</div>

<div class="myTabList">
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
</div>

<div class="myTabList">
  <div class="mytab"></div>
  <div class="mytab"></div>
</div>

动态更改CSS类的属性

1 个答案: