Question

我正在使用CSS来分隔表单域和文本标签。 这工作正常，但我也想使用CSS CheckBox滑块，它使用LABEL配置。

label用于表单字段标签和滑块的组合正在搞乱滑块布局。

我创建了一个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> 

有人点我在正确的方向如何有间隔的其他领域工作滑块。

谢谢:)

Answer 1

的“div.spaced标签”选择的样式定义被重写样式的“.switch”选择的。

我建议你创建的标签元素内分离式DIV：

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

这将解决这个问题的宽度。为了positionate的“一个标签”上的滑块的左侧还需要浮动（左）属性：

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

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

我希望我能帮助你。