如何在不同行上对齐2个mat-slide-toggle字段

Question

我有一个表单，该表单在单独的行上具有2个滑块切换。要求是在幻灯片的左侧放置标签，以便在每个控件上设置属性labelPosition =“ before”。但是，由于标签字符数的差异，滑块无法彼此对齐。有没有一种方法可以实现。

我试图查看CSS中是否有任何样式可以覆盖，或者元素上是否有合适的属性。

这是我正在使用的HTML：

<div class="form-group row">
        <div class="col-sm-3">
          <mat-slide-toggle labelPosition="before" color="primary">Automated Balance Check Enabled</mat-slide-toggle>
      </div>
      </div>
      <div class="form-group row">
        <div class="col-sm-3">
          <mat-slide-toggle labelPosition="before" color="primary">Balance Threshold Enabled</mat-slide-toggle>
        </div>
      </div>

我想使两个滑块对齐，但是它们与本屏幕快照中的显示不同。

标签文本和实际滑块之间的第二个mat-slide-toggle上需要有更多空间。我可以解决此购买问题，在文本“启用平衡阈值”之后添加多个空格。

Answer 1

尝试下面的代码来解决您的问题

    <div fxLayout="row"><mat-label fxFlex="40%">Automated Balance Check Enabled</mat-label>
<mat-slide-toggle fxFlex="60%" labelPosition="before" color="primary"></mat-slide-toggle></div>
  <div fxLayout="row">
<mat-label fxFlex="40%">Balance Threshold Enabled</mat-label>
<mat-slide-toggle fxFlex="60%" labelPosition="before" color="primary"></mat-slide-toggle></div>```

Answer 2

您可以尝试在给定固定大小的CSS中定义.mat-slide-toggle-content类。 此类适用于带有标签文本的范围，因此它可以工作，但我尚未测试。