如何在同一对齐文本上显示单选按钮圆圈和文本？

Question

我在blazor asp.net .net core 7 工作。我面临无法显示单选按钮圆圈和具有相同对齐方式的文本的问题。

我需要在同一行的内部或外部添加对齐圆无线电和文本

并在圆形单选框和内部文本之间添加空格，如下图所示。

我尝试如下：

<div class="form-group row">
        <label for="example-text-input" class="col-3 col-form-label">
            AccessType
        </label>

        <InputRadioGroup @bind-Value="@appsdata.AccessType" class="form-control">
            @foreach (var option in rdaccessOptions)
            {
                <InputRadio Value="option" />

                <span> @option</span> <br />
            }
        </InputRadioGroup>

    </div>

预期结果

Answer 1

您可以在此处使用 CSS：display: flex; align-items: center 会将所有项目对齐在同一行上。

<InputRadioGroup @bind-Value="@appsdata.AccessType" class="form-control" style="display: flex; align-items: center;">
        @foreach (var option in rdaccessOptions)
        {
            <InputRadio Value="option" />

            <span> @option</span> <br />
        }
</InputRadioGroup>