Materialisecss对齐多个开关

Question

我正在使用materlizecss。我想创建一个带有多个开关的表格（开 - 关），每个开关的标签不同，所以开关没有对齐：

我希望它们对齐，所以每个“开关”都是右对齐的，文本是左对齐的，有点像这样：

目前，我的交换机几乎是来自materializecss网络示例的复制粘贴：

<div class="switch">
  <label>
    My Cool Label
    <input type="checkbox">
    <span class="lever"></span>
  </label>
</div>

Answer 1

.container {
  padding:10px 0;
  border: 1px solid blue;
}

.lever {
  float: right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<div class="container">
 <div class="switch">
  <label>
    My Cool Label
    <input type="checkbox">
    <span class="lever"></span>
  </label>
 </div>
</div>
 <div class="container">
  <div class="switch">
  <label>
    My Cool Label
    <input type="checkbox">
    <span class="lever"></span>
  </label>
 </div>
</div>
 <div class="container">
  <div class="switch">
  <label>
    My Cool Label
    <input type="checkbox">
    <span class="lever"></span>
  </label>
 </div>
</div>

忽略容器及其CSS，它作为视觉指南。只有一个CSS规则应用于交换机，并且在您调用它时不是“hack”。