CSSラベルのレイアウトがスライダに影響する

Question

CSSを使用してフォームフィールドとテキストラベルのスペースをとります。 これは問題なく動作しますが、LABELを使用して設定されたCSS CheckBoxスライダも使用したいと考えています。

labelフォームフィールドラベルとスライダーのCSSの組み合わせがスライダーレイアウトを台無しにしています。

私は余分なCSSが関与していないときに、これはスライダーと作業スライダーに影響を及ぼしているか、フォームフィールドのレイアウトを示すJFIDDLEを作成しました。

ワーキングスライダー：

<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」セレクタのスタイルをオーバーライドしています。

私はあなたがlabel要素内の区切りのdivを作成することをお勧め：

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

これは、幅の問題を修正します。

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

ヒント：スライダーの左側にある「タグ」をpositionateするために、それはまた、フロート（左）プロパティを必要とする方が良いレイアウトシステム:)

として フレキシボックスを使用することができます

私はあなたにこれを手伝ってくれることを願っています。