html - 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”。