从3列中显示的复选框列表中删除间隙

Question

我填充了数据库中的复选框列表。我试图显示列3列。但是复选框之间存在间隙，其中复选框的标题很长。

示例：

我的代码：

HTML和CSS：

#skills-label {
  width: 30%;
  border: 1px solid #E9E9EF;
  border-radius: 3px;
  background-color: #F7F8F9;
  display: inline-flex;
}

#skills-label>input {
  float: right;
}

<div class="uk-margin">
  <div *ngFor="let data of skills">
    <label id="skills-label" *ngFor="let skill of data.allSkills">
              <input type="checkbox" (change)="onChange(skill, $event.target.checked)"> {{skill}}
            </label>
  </div>
</div>

如何平衡空间，以便没有空隙？这甚至可能吗？

Answer 1

您也可以flexbox使用.uk-margin div。

.uk-margin div {
    display: flex;
    flex-wrap: wrap;
}

#skills-label {
  width: 30%;
  border: 1px solid #E9E9EF;
  border-radius: 3px;
  background-color: #F7F8F9;
  display: inline-flex;
}

#skills-label>input {
  float: right;
}

.uk-margin div {
    display: flex;
    flex-wrap: wrap;
}

<div class="uk-margin">
  <div *ngFor="let data of skills">
    <label id="skills-label" *ngFor="let skill of data.allSkills">
          <input type="checkbox" (change)="onChange(skill, $event.target.checked)"> {{skill}}
        </label>
    <label id="skills-label" *ngFor="let skill of data.allSkills">
          <input type="checkbox" (change)="onChange(skill, $event.target.checked)"> {{skill}} {{skill}} {{skill}} {{skill}}{{skill}} {{skill}} {{skill}} {{skill}} {{skill}}
        </label>
    <label id="skills-label" *ngFor="let skill of data.allSkills">
          <input type="checkbox" (change)="onChange(skill, $event.target.checked)"> {{skill}}
        </label><label id="skills-label" *ngFor="let skill of data.allSkills">
          <input type="checkbox" (change)="onChange(skill, $event.target.checked)"> {{skill}}
        </label>
    <label id="skills-label" *ngFor="let skill of data.allSkills">
          <input type="checkbox" (change)="onChange(skill, $event.target.checked)"> {{skill}}
        </label>
    <label id="skills-label" *ngFor="let skill of data.allSkills">
          <input type="checkbox" (change)="onChange(skill, $event.target.checked)"> {{skill}}
        </label>
  </div>
</div>