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

【问题标题】：How to align 2 mat-slide-toggle fields on different rows如何对齐不同行上的 2 个 mat-slide-toggle 字段
【发布时间】：2019-09-05 10:22:41
【问题描述】：

我有一个表单，它在不同的行上有 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 需要有更多空间。我可以解决这个问题，在“启用平衡阈值”文本后添加多个空格。

【问题讨论】：

标签： angular angular-material

【解决方案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>```

【讨论】：

【解决方案2】：

您可以尝试在给定固定大小的 CSS 中定义 .mat-slide-toggle-content 类。这个类被应用到带有标签文本的span，所以它可以工作，但我没有测试过。

【讨论】：

谢谢你的工作。我可以指定一个固定的宽度。我可以将它添加到我的外部 css 中，它工作正常。但是，如果我以后想使用滑块切换，我不希望在其他页面上使用这个固定宽度。我尝试将样式作为内部 CSS 添加到页面顶部，如下所示，但它不起作用。有没有解决的办法？ <style> .mat-slide-toggle-content{ width:280px; } </style>
您应该只为实际组件定义一个 css 文件，并在其中添加此样式。见the angular tutorial