html - 影响 slider 的 CSS 标签布局

Question

我正在使用 CSS 分隔表单字段和文本标签。这工作正常，但我还想使用 CSS CheckBox slider ，它是使用 LABEL 配置的。

表单字段标签的 label CSS 和 slider 的组合打乱了 slider 布局。

我创建了一个 JFIDDLE 显示表单域布局，当不涉及额外的 CSS 时，这如何影响 slider 和工作 slider 。

工作 slider :

 <label class="switch">
    <input type="checkbox" name='check' id='check' value="1" />
    <div class="slider"></div>
  </label>

失败的 slider :

<div class='spaced'>
  <label>Form Label</label>
  <a href='#' title=""><img src="help.png"></a>

  <label class="switch">
    <input type="checkbox" name='check' id='check' value="1" />
    <div class="slider"></div>
  </label>
</div>

有人能给我指出正确的方向吗，如何让工作 slider 与其他字段间隔开。

谢谢:)

Answer 1

“div.spaced label”选择器的样式定义覆盖了“.switch”选择器的样式。

我建议您在标签元素内创建一个单独的 div:

<label>
    <div class="switch">
        <input type="checkbox" name='check' id='check' value="1" />
        <div class="slider"></div>
    </div>
</label>

这将解决宽度问题。要将“a-tag”定位在 slider 的左侧，它还需要 float (左)属性:

div.spaced a {
    float: left;
    margin-right: 10px; // Optional margin
}

提示:您可以使用 flexbox 作为更好的布局系统:)

希望我能帮到你。