Angular中如何将文本对齐到material-radio-button右侧？

问题核心是你用了块级元素<p>包裹红色文本，导致它自动换行，无法和单选按钮的主文本横向对齐。以下是修正方案：

1. 修改HTML结构 #

将<p>标签替换为行内元素<span>，因为<p>默认是块级元素，会独占一行：

<mat-radio-button #cerner4 class="radio-item col-md-2" value="Administration" (click)="onRadioClick(8, $event, cerner4)">
  Administration <span class="required">(Supervisor, Manager, Director)</span>
</mat-radio-button>

2. 调整CSS样式 #

通过flex布局确保单选按钮内部内容横向对齐，并优化红色文本的间距：

.radio-group{
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.radio-item{
  margin-bottom: 10px;
  margin-left: 10px;
  /* 让单选按钮内部元素垂直居中对齐 */
  display: flex;
  align-items: center;
}

.required {
  color: red;
  font-weight: bold;
  font-style: italic;
  /* 可选：和主文本拉开一点距离，视觉更舒适 */
  margin-left: 8px;
  /* 确保行内显示，不换行 */
  display: inline-block;
}

补充：处理Material组件默认样式（可选） #

如果上述调整后仍有对齐问题，可能是Material单选按钮的默认布局影响，可以添加以下样式覆盖：

/* 确保单选按钮的标签内容区域横向排列 */
.mat-radio-label-content {
  display: flex;
  align-items: center;
}

这样修改后，红色文本就能和"Administration"在同一行，且与单选按钮图标垂直居中对齐，实现干净的布局效果。

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