时间戳

首页 > 解决方案 > 根据项目数调整按钮大小

javascript - 根据项目数调整按钮大小

问题描述

在我的 Angular 应用程序中。我正在尝试使用 *ngFor 指令在我的视图中呈现按钮。我想要并排呈现的按钮。我能够做到。我想根据按钮的数量调整按钮的大小。例如：如果我有 4 个按钮，我希望每个按钮的宽度为 25% 如果我有 2 个按钮，我希望每个按钮的宽度为 50% 如果我有 1 个按钮，我希望每个按钮的宽度为 100%

我怎样才能实现它。请指导我。

HTML

<nb-card>
<div class="col-md-12" >
  <div class="col-md-3 pt-5" *ngFor="let data of TestData">
    <nb-card class="testCard">
      <input type="text" class="form-control" [value]="data.test[0]" readonly>
        <div>
            <input type="button" *ngFor="let ts of data.test[1]"  class="form-control testButton" (click)="onClick(ts.id)" [value]="ts.foo" readonly>
        </div>
    </nb-card>
  </div>
</div>
</nb-card>

css

.testButton {
display: display: inline-block;
width: 25%
// if i mention width 25% only. I am able to render the buttons side by side. otherwise it renders width width 100% and not side by side.
}

标签： javascripthtmlcss

解决方案

如果你不能使用 flexbox：

<input type="button" [style.width.%]="100/data.test[1].length">

推荐阅读