Javascript 有一种方法可以将单选按钮的标签定位在角材质2中单选按钮本身的上方？

我使用的是angular material 2（），我试图将md单选按钮的标签放在收音机本身的上方，如下所示：

医生说你可以轻松地将位置设置为之后或之前。 我也在使用flex布局（github.com/angular/flex布局）

这是我的密码：

<md-radio-group formControlName="id_customer_type" (change)="onChangeCustomerType($event.value)">
  <md-radio-button type="radio" name="id_customer_type" value="1" [checked]="true"> Persona</md-radio-button>
  <md-radio-button type="radio" name="id_customer_type" value="2"> Empresa</md-radio-button>
  <md-radio-button type="radio" name="id_customer_type" value="3"> IoT/M2M</md-radio-button>
</md-radio-group>

人格面具
埃普雷萨酒店
物联网/M2M

---

如果有人能帮助我，我将非常感激。谢谢

如果您仔细观察md radio group创建的元素，您会发现：

<label class="mat-radio-label" for="md-radio-2-input">
    <div class="mat-radio-container">
        <div class="mat-radio-outer-circle"></div>
        <div class="mat-radio-inner-circle"></div>
        <div class="mat-radio-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLLabelElement]"
             ng-reflect-centered="true" ng-reflect-disabled="false"></div>
    </div>
    <input class="mat-radio-input cdk-visually-hidden" type="radio" id="md-radio-2-input" name="md-radio-group-0">
    <div class="mat-radio-label-content"><span style="display:none">&nbsp;</span>Option 2</div>
</label>

---

这基本上是告诉我们，正在使用对齐其直接子项（单选按钮和标签）。默认的

弹性方向

为

行

，因此省略。您可以将其更改为列。通过添加

flex direction:column reverse

，您将把标签放在上面。

如果您更靠近

md radio group

创建的元素，您会注意到：

<label class="mat-radio-label" for="md-radio-2-input">
    <div class="mat-radio-container">
        <div class="mat-radio-outer-circle"></div>
        <div class="mat-radio-inner-circle"></div>
        <div class="mat-radio-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLLabelElement]"
             ng-reflect-centered="true" ng-reflect-disabled="false"></div>
    </div>
    <input class="mat-radio-input cdk-visually-hidden" type="radio" id="md-radio-2-input" name="md-radio-group-0">
    <div class="mat-radio-label-content"><span style="display:none">&nbsp;</span>Option 2</div>
</label>

这基本上是告诉我们，正在使用对齐其直接子项（单选按钮和标签）。默认的

弹性方向

为

行

，因此省略。您可以将其更改为列。通过添加

flex-direction:column-reverse

您将把标签放在上面。

这对我很有效

:host /deep/ .mat-radio-label {
  flex-direction: column-reverse;
  .mat-radio-label-content {
    padding: 0;
  }
}

使用

“@angular/material”：“^6.4.7”

这对我很有效

:host /deep/ .mat-radio-label {
  flex-direction: column-reverse;
  .mat-radio-label-content {
    padding: 0;
  }
}

使用

“@angular/material”：“^6.4.7”

---

这将起作用，但请确保应用

/deep/

覆盖材质css类，如下所示：

/deep/.mat radio label{flex direction:column reverse；}

。我为您添加了一个plunkr@bogdance，/deep/不推荐使用，应该使用：：ng deep:@Vega-谢谢您让我知道。从文档中看起来像是

：：ng deep

将指向相同的路径，不清除替换。最后，我使用此

。上面的radio label：：ng deep.mat radio label{flex direction:column reverse；}

使用类。上面的radio label在md radio group标记中我更改组件中某些收音机的标签位置。谢谢这将起作用，但请确保应用

/deep/

覆盖材质css类，如下所示：

/deep/.mat radio label{flex direction:column reverse；}

。我为您添加了一个plunkr@bogdance，/deep/不推荐使用，应该使用：：ng deep:@Vega-谢谢您让我知道。从文档中看起来像是

：：ng deep

将指向相同的路径，不清除替换。最后，我使用此

。上面的radio label：：ng deep.mat radio label{flex direction:column reverse；}

使用类。上面的radio label在md radio group标记中我更改组件中某些收音机的标签位置。谢谢