javascript - 如何使用 CSS 和 html 在容器内动态创建和排列复选框？

Question

我想创建一个容器，它将复选框排列到表列中。 目前，在下面的 html 代码中，它向我显示以下输出

以下是我的代码:

<label class="control-label text-success">Add Applications</label>
<div class="container border">
  <div class="row">
    <div class="col-sm anyClass">
      <div
        class="form-check form-check-inline text-nowrap col-md-3 pl-2"
        *ngFor="let name of applicationList; let srno = index"
        [attr.data-index]="srno"
      >
        <div *ngIf="srno == 1||srno == 4||srno == 7||srno == 10">
          <span class="ml-4"></span>
        </div>
        <div *ngIf="srno == 2||srno == 5||srno == 8||srno == 11">
          <span class="ml-5"></span>
        </div>
        <input type="checkbox" name="{{name}}" value="{{name}}" />
        <label class="pt-2 pl-1">{{name}}</label>
      </div>
    </div>
  </div>
</div>

我的ts是:

applicationList = [
  'Application 6',
  'Application 7',
  'Application 8',
  'Application 9',
  'Application 10',
  'Application 11',
  'Application 12',
];

这里我根据数组列表中的 srno 编号对边距值进行了硬编码。 我希望这是动态计算的。 请帮助我，提前致谢。

Answer 1

您可以删除硬代码并使用flex来解决这个问题。

CSS:

    .box {
        height: 300px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .box>* {
        flex: 1 1 80px;
    }

     <div class="box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
        <div>Eight</div>
        <div>Nine</div>
      </div>

有关柔性包装的更多信息:https://css-tricks.com/almanac/properties/f/flex-wrap/ 有关弯曲方向的更多信息:https://developer.mozilla.org/it/docs/Web/CSS/flex-direction

完整的 Flex 简单指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

编辑我意识到现在不是一个垂直列表。这里是片段:

      .box {
        display: flex;
        flex-wrap: wrap;
    }
    .box>* {
        flex: 1 1 33%;
    }

      <div class="box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
        <div>Eight</div>
        <div>Nine</div>
      </div>