Angular 如何均匀分布选项卡项？

我正在开发新的管理页面。在注册页面上，我需要有一个菜单，每个管理部分有五个选项卡。我们将ant用于angular，并将ant库中的组件用于tab菜单

我已尝试覆盖ant选项卡的样式，如下所述：

这里呢

这些文章都没有帮助

下面是一个代码示例

    <nz-tab nzTitle="LAN STATUS">
      Content of Tab Pane 1
    </nz-tab>
    <nz-tab nzTitle="DHCP">
      Content of Tab Pane 2
    </nz-tab>
    <nz-tab nzTitle="DNS">
        Content of Tab Pane 2
      </nz-tab>
      <nz-tab nzTitle="USERS">
          Content of Tab Pane 2
      </nz-tab>
      <nz-tab nzTitle="AMAZON SERVICES">
          Content of Tab Pane 2
      </nz-tab>
  </nz-tabset>

选项卡窗格1的内容
选项卡窗格2的内容
选项卡窗格2的内容
选项卡窗格2的内容
选项卡窗格2的内容

---

我希望在内部有一个均匀分布的元素，并且有封装组件，因此您应该使用deep或禁用该封装（我更喜欢使用deep）

@组件({
选择器：“第二个cmp”，
模板：`Second Component`，
样式：['.cmp{边框：绿色2px实心；}']，
封装：视图封装。无//用于禁用此组件的CSS封装
})

或

你可以在这里读更多

---

链接中发布的解决方案解决了您的问题。您只需将此SCS添加到项目中：

.ant-tabs {
  &-nav {
    display: flex;

    .ant-tabs-tab {
      flex-grow: 1;
      margin-right: 0px;
      width: 100%;
      text-align: center;
    }
  }
}

（确保在角度项目中确实使用了*.scss，默认值为*.css）

然后，您可以在两个位置添加它：

在全局样式表中。您的项目附带一个

style.scss

文件。只需将代码片段添加到那里，您的所有选项卡都将被平均分割

组件样式内部。相同的样式，但由于角度视图封装，您的SCS开始时如下：

：host:：ng deep.ant tabs{

（您可以在此处找到演示：）。您还可以通过以下方式禁用组件上的视图封装：

@组件（{ ... 封装：视图封装。无， })

---

嗨，伙计们，改变到css以外的东西不是一个选项。我有旧版本应用程序的现有样式，必须在新平台上重用。我已经将给定的scss代码片段转换为css，并像这样将其添加到组件css文件中。

：host:：ng deep.ant tabs nav{display:flex！important；}：host:：ng deep.ant tabs nav.ant tabs tab{flex grow:1！重要；右边距：0px！重要；宽度：100%！重要；文本对齐：center！重要；}

选项卡较大，但不会占用整个容器空间。

.ant-tabs {
  &-nav {
    display: flex;

    .ant-tabs-tab {
      flex-grow: 1;
      margin-right: 0px;
      width: 100%;
      text-align: center;
    }
  }
}