如何消除3列布局复选框列表因标题过长产生的间隙？

你的需求完全可行！之所以会出现间隙，是因为原来的布局方式（给每个label固定30%宽度+inline-flex）没有处理内容换行后的高度对齐问题，且没有统一控制整体布局。下面给你两种简单有效的解决方案：

方案一：CSS Grid（推荐，布局更稳定） #

Grid布局天生适合这种行列均匀分布的场景，能自动让每行的高度一致，完美消除间隙。

修改后的CSS： #

/* 新增容器样式，控制整体3列布局 */
.skills-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列，每列宽度均等分配 */
  gap: 12px; /* 可选：设置列、行之间的间距，让布局更美观 */
}

#skills-label {
  /* 移除原来的width:30%和inline-flex */
  border: 1px solid #E9E9EF;
  border-radius: 3px;
  background-color: #F7F8F9;
  display: flex;
  align-items: center; /* 让复选框和文字垂直居中 */
  padding: 8px 12px; /* 增加内边距，避免内容挤在一起 */
}

#skills-label > input {
  margin-left: auto; /* 替代float:right，把复选框推到标签右侧 */
}

修改后的HTML： #

<div class="uk-margin">
  <!-- 用一个统一的容器包裹所有复选框标签 -->
  <div class="skills-container">
    <!-- 用ng-container避免生成多余的DOM节点 -->
    <ng-container *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>
    </ng-container>
  </div>
</div>

方案二：Flexbox（灵活度高） #

如果更习惯用Flex布局，也可以通过弹性盒实现同样的效果：

修改后的CSS： #

.skills-container {
  display: flex;
  flex-wrap: wrap; /* 内容超出时自动换行 */
  gap: 12px; /* 控制间距 */
}

#skills-label {
  flex: 1 1 calc(33.333% - 12px); /* 每列占1/3宽度，减去gap的尺寸 */
  min-width: 220px; /* 可选：设置最小宽度，避免窗口过窄时内容挤压 */
  border: 1px solid #E9E9EF;
  border-radius: 3px;
  background-color: #F7F8F9;
  display: flex;
  align-items: center;
  padding: 8px 12px;
}

#skills-label > input {
  margin-left: auto;
}

HTML结构和方案一完全一致。

为什么原来的代码会出现间隙？ #

原来的实现中，每个label单独设置width:30%和inline-flex，当标签内的文字换行时，不同标签的高度会不一致。而inline-flex元素默认是基线对齐，高度较矮的标签会和高度较高的标签基线对齐，从而在下方产生间隙。同时，30%的宽度没有考虑元素之间的间距，可能导致换行逻辑混乱。

而Grid/Flex布局会统一控制每行的高度，让同一行的所有标签高度保持一致，自然就消除了间隙，同时保证每列宽度均匀分布。

内容的提问来源于stack exchange，提问作者Skywalker