Angular Material:复选框的mat-checkbox垂直对齐

Mad*_*Mac 9 angular-material

我似乎无法覆盖默认值以相对于复选框标签垂直对齐复选框。搜索了一段时间,但没有任何效果。请参阅示例图像:

在此处输入图片说明

应该是这样的:

在此处输入图片说明

尝试了以下方法:

.mat-checkbox-inner-container {
    margin: none;
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<label><b>Home Type</b></label>
    <mat-checkbox>Entire place<br><small class="text-muted">Have a place to yourself</small></mat-checkbox>
    <mat-checkbox>Private room<br><small class="text-muted">Have your own room and share some common spaces</small></mat-checkbox>
    <mat-checkbox>Shared room<br><small class="text-muted">Stay in a shared space, like a common room</small></mat-checkbox>
Run Code Online (Sandbox Code Playgroud)

Pat*_*t M 11

与 Craig 的回答类似,但作为 .mat-checkbox.mat-accent 的后代,无需使用“!important”

.mat-checkbox.mat-accent .mat-checkbox-inner-container {
    margin: 2px 8px auto 0;
}
Run Code Online (Sandbox Code Playgroud)

或使用 sass/less

.mat-checkbox.mat-accent {
   .mat-checkbox-inner-container {
      margin: 2px 8px auto 0;
   }
}
Run Code Online (Sandbox Code Playgroud)

  • 您是否必须将其添加到全局样式表中?我尝试将其粘贴到我的一个组件的样式表中,但没有成功,我想避免将其设为全局样式。 (2认同)