将单选按钮圆圈与容器顶部对齐

Question

我正在使用 Material (v11) 的 Angular (v11) 项目工作。
我正在开发一个用户可以 select 1个选项。这些选项将显示为带有信息行的垫卡。我希望它看起来（简单来说）像这样：

我正在使用单选按钮组来执行此操作 (https://material.angular.io/components/radio/overview)。

我有样式问题。我希望单选按钮圆圈与卡片顶部对齐，如上图所示。
但是默认情况下，圆圈在整个容器上浮动在中间，所以它看起来像这样：

现在，我可以将 class 添加到具有负边距顶部的单选按钮圆圈，这样它就会被向上推以与垫卡的顶部对齐。但我的问题是 mar-cards 的高度可能不同。

Check out this stackblitz demo，它显示了带有负边距顶部的选项，但是其中一张垫卡更大，所以它的圆圈没有与顶部对齐。

有没有更好的方法让单选圆与卡片顶部对齐？
或者只是获得我想要的总体设计的更好方法？

Answer 1

由于 mat-radio-label，mat-radio-button 与中心对齐。因此，要根据您的要求修复它，请删除对 mat-radio-container 所做的 css 更改并将其添加到 css/scss:

::ng-deep .mat-radio-label {
  align-items: inherit!important;
}

我已经编辑了您的 stackblitz，它正在运行。请验证...