在单选按钮前对齐文本

Question

请大家多多关照，我是 css 的新手，希望你们能理解。我有一个顾虑。我们如何对齐单选按钮之前的文本

所以它看起来像这样 ---> 包括已完成和已取消？ [radio-button yes option] [radio-button No option] 因为目前我的单选按钮在文本下方。任何的想法？谢谢

它应该看起来像这样.. Include Completed and Cancelled? O YES O NO

#screenshot , 当前输出

#代码

<div style="padding-top: 18px;">
        <p>Include Completed and Cancelled?</p>
        <mat-radio-group name="subtenantGuaranty"  layout="column" style="display: flex;flex-direction: row;align-items: center;gap: 30px;">
          <mat-radio-button *ngFor="let option of completedOrCanceled" class="md-primary" [value]="option.text" color="primary">
            {{ option.text }}
          </mat-radio-button>
        </mat-radio-group>
        </div>

Answer 1

这样的事情怎么样：

<div style="padding-top: 18px;">
    <mat-radio-group name="subtenantGuaranty"  layout="column" style="display: flex;flex-direction: row;align-items: center;gap: 30px;">
        <p>Include Completed and Cancelled?</p>
        <mat-radio-button *ngFor="let option of completedOrCanceled" class="md-primary" [value]="option.text" color="primary">
            {{ option.text }}
        </mat-radio-button>
    </mat-radio-group>
</div>

在单选按钮前对齐文本

align text before a radio button

css

angular-material