2

ある種のカスタムチェックボックス入力をしようとしていますが、このすべてのパディングがどこから来ているのかよくわかりません..

アイデアは、テキスト付きのチェックボックスの代わりに画像が表示され、選択されると画像の不透明度が減少してその下にシンボルが表示され、選択されたことを示します。

このフィドルで煮詰めました： http://jsfiddle.net/tx76J/1/

<li>
    <input id="1" type="checkbox">
    <label for="1">
        <figure>
            <img src="http://www.moderndandies.com/files/images/Asus-smartphone-android.jpg">          
        </figure>
    </label>
</li>​

ここに画像の説明を入力

4

1 に答える 1

8

  • に追加list-style: none;しますli。問題はリスト マーカーが原因です。黒の背景色を削除すると確認できます (これはデモ専用ですが、将来の訪問者のために:は常にまたはliにのみ存在する必要があります)。olul

    ここに画像の説明を入力

  • また、imgtoを設定しdisplay: blockて、下部のスペースを削除します。これは、画像がデフォルトでインラインであると見なされるために表示されます (この質問でも説明されています:アンカー タグSOの下部にある空白)。

動作を示すjsFiddle Demo

于 2012-07-09T15:56:16.283 に答える