クリック時の位置を変更するカスタムチェックボックス

Question

私は何か不足していると思うが、次の問題の解決策を見つけることができない。

私は文章のリストでカスタムチェックボックスを使用しています。最初はうまく見えますが、一度チェックボックスをチェックすると移動します。 チェックボックスをチェックするとチェックボックスが移動する理由がわかりません。私はcontent: "/2714"; content: "";にあるチェックボックスを変更することにより、クリックで移動していないことに気づいたhttps://jsfiddle.net/Hodor_/vhhj7huv/
：ここ

はフィドルです。

内容がチェックボックスの位置にどのように影響するか理解できません。

他の質問では、私は垂直整列を使用するための推奨を見ました：中間、それは私のためには動作しません。

アイデア？

Answer 1

position: absoluteと結びついて、display: flexの使用に問題があります。常にうまくいくとは限りません。あなたは3簡単な変更加える必要があり、この修正するには

：）

1）あなたのlabel:before

2からposition: absoluteを削除し、あなたのlabel

3からpadding: 0 0 0 50px;を削除）margin-right: 20pxを追加します（またはあなたが望むもの）をlabel:beforeに追加します。

シンプル..だからあなたの最終的なコードは次のようになります - Fiddle here

label{ 
    display: flex; 
    align-items: center; 
    font-size: 14px; 
    font-weight: 400; 
    line-height: 30px; 
    cursor:pointer; 
    color black; 
} 

label:before{ 
    /* position:absolute; */ 
    content:""; 
    display:flex; 
    justify-content: center; 
    align-items: center; 
    height: 30px; 
    width: 30px; 
    left: 25px; 
    text-align:center; 
    font-size: 20px; 
    color: white; 
    border: 1px solid #9b9b9b; 
    border-radius: 4px; 
    transition: all 0.5s ease; 
    margin-right: 20px; 
} 

覚えておいてください：flexboxはあなたが「柔軟」を持っているか、あなたの要素を制御のように流れることを可能にする、それがより柔軟になりますあなたの要件に基づいて要素を独自に配置する要素への自然性。一方、とは反対にとなります。この要素を文書から取り出して、方向（left、right、top、bottom）、「剛性」のような、または要素を厳重に制御する方法のような場所に配置することができます。

Answer 2

私はコンテンツを非表示にするためにtext-indentを使用しました。したがって、基本的にコンテンツは常に存在し、チェックボックスは現在動いていません。

Here作業フィドル。