Question

我有一个下面的代码片段，用于显示静态HTML的TABS。但是每个项目都会根据一些业务逻辑显示在UI上。基于我需要设置宽度的标签数量。例如，如果显示两个标签，那么我需要平均分割标签，即50％。当三，它将是33.3％。

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
 </ul>

使用＆＃39; ng-class＆＃39;我可以添加运行时类来应用宽度，但是由于我需要在ng-class中应用相同的业务逻辑，因此增加了复杂性并终止了页面。

相反，我试图使用ng-init来计算检查形成的标签数量。

 <ul ng-init="totalTabs=0">
    <li ng-init="totalTabs=totalTabs+1">1</li>
    <li ng-init="totalTabs=totalTabs+1">2</li>
    <li ng-init="totalTabs=totalTabs+1">3</li>
    <li ng-init="totalTabs=totalTabs+1">4</li>
</ul>

这并没有给我预期的数量。你有任何线索或建议吗？

Answer 1

现在是时候使用CSS3的一些新功能了。如果您不了解它，那么会有一个名为 flex 的新显示。它允许很多东西，其中之一就是根据父元素的宽度赋予元素相同的宽度。

您可以找到quick tutorial here，或者如果您想要快速：

ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    li {
        flex: 1 1 auto;
    }
}

根据元素数量增加计数器

1 个答案: