CSS 影响滑块的标签布局

Question

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

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

我创建了一个 JFIDDLE 来显示表单字段布局，当额外 CSS不涉及。

工作滑块：

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

失败的滑块：

<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>

有人能给我指出正确的方向吗，如何使滑块 spaced 与其他字段一样。

谢谢:)

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" 定位在滑块的左侧，它还需要浮动（左）属性:

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

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

希望能帮到你。

CSS 影响滑块的标签布局

CSS Label layout affecting Slider

html

css

slider