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的作爲一個更好的佈局系統:)

我希望我能幫助你。