角度材质：单选按钮对齐

Question

我有以下 HTML，看起来像这样。

<mat-radio-group aria-label="Select an option">
    <mat-radio-button>Sample 1</mat-radio-button>
    <mat-radio-button>Sample 2</mat-radio-button>
    <mat-radio-button>Unknown Sample</mat-radio-button>
</mat-radio-group>
<mat-radio-group aria-label="Select an option">
    <mat-radio-button>Yes</mat-radio-button>
    <mat-radio-button>No</mat-radio-button>
    <mat-radio-button>Unknown</mat-radio-button>
</mat-radio-group>

单选按钮如下所示：

我想修改 CSS，使两个不同组的按钮垂直排列，但我不知道如何实现这一点。

任何建议将不胜感激！

这就是我想要的样子。有没有办法在不手动添加空格的情况下做到这一点？

Answer 1

您可以使用 display: grid 来实现：

.mat-radio-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

就是你所需要的。它将每个无线电组转换为 1 个片段的三列。在 MDN 上阅读有关 Grid Layout 和 grid-template-columns 的更多信息。

如果您启用了全局样式：请注意，您可能需要使用额外的 CSS 类，而不是 .mat-radio-group，因此样式不会在您使用无线电组的任何地方应用。

Here's a StackBlitz example 显示在上方。