如何实现mat-checkbox组件的水平整齐排列？

嘿，我看你现在的mat-checkbox排列得有点参差不齐，想要让它们水平整齐对齐的话，咱们可以从结构和样式上调整一下——你原来的代码里嵌套了多层ul和div，再加上float的用法，很容易导致布局跑偏。试试下面的优化方案：

方案一：用Flexbox重构布局（推荐） #

Flexbox是处理这种流式布局最稳定的方式，能轻松控制对齐、换行和间距。先简化你的HTML结构，再搭配简单的样式：

修改后的HTML代码

<div class="addon-wrapper">
  <!-- 遍历每个分类标题 -->
  <div *ngFor="let title of addonTitles" class="category-group">
    <b>{{ title }}</b>
    <!-- 用flex容器包裹同分类的checkbox -->
    <div class="checkbox-row">
      <mat-checkbox 
        *ngFor="let addon of bs.addons"
        *ngIf="addon.category === title"
        (change)="selectAddon($event)" 
        [value]="addon.cbsCode">
        {{ addon.cbsCode }}
      </mat-checkbox>
    </div>
  </div>
</div>

对应的CSS样式（可以放在组件的styles里）

.addon-wrapper {
  padding: 0;
}

.category-group {
  margin-bottom: 15px; /* 分类之间的间距 */
}

.category-group b {
  display: block;
  margin-bottom: 8px;
}

.checkbox-row {
  display: flex;
  flex-wrap: wrap; /* 超出宽度自动换行 */
  gap: 15px; /* checkbox之间的水平+垂直间距 */
}

.checkbox-row mat-checkbox {
  min-width: 125px; /* 保证每个checkbox的最小宽度，对齐更整齐 */
}

方案二：调整原有结构的样式（如果不想大改结构） #

如果你想保留原来的ul/li结构，那可以去掉float，给容器加上flex属性，避免布局混乱：

<div class="container" style="padding:0px;">
  <ul *ngFor="let title of addonTitles" style="clear:both; list-style: none; padding: 0; margin: 0 0 15px 0;">
    <li style="padding:0px; margin-bottom: 8px;">
      <b>{{ title }}</b>
    </li>
    <!-- 替换原来的嵌套ul，用flex容器 -->
    <div class="checkbox-container" style="display: flex; flex-wrap: wrap; gap: 15px;">
      <mat-checkbox 
        *ngFor="let addon of bs.addons"
        *ngIf="addon.category === title"
        (change)="selectAddon($event)" 
        [value]="addon.cbsCode"
        style="min-width: 125px;">
        {{ addon.cbsCode }}
      </mat-checkbox>
    </div>
  </ul>
</div>

为什么这样改？ #

1. 去掉了冗余的ul嵌套：原来的结构里用ul包裹section不符合语义，还会带来默认的列表样式干扰；
2. 用Flexbox替代float：float布局容易出现高度塌陷、换行不对齐的问题，flex布局更可控，能轻松实现整齐的流式排列；
3. 统一间距和最小宽度：通过gap和min-width保证每个checkbox之间的间距一致，换行后也能对齐。

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