1

以下は、ボタンのように見えるようにチェックボックスをスタイルするコードですが、チェックボックスボタンをクリックすると、ページの一番上に移動し続けるという問題がありますか?

HTML/PHP:

echo '<div id="ck-button"><label><input type="checkbox" name="options[]" id="option-' . $indivOption . '" value="' . $indivOption . '" /><span>' . $indivOption . '</span></label></div>';

CSS:

#ck-button {
    margin:8px;
    background-color:#EFEFEF;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button:hover {
    background:green;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}
4

1 に答える 1

2

セレクターに追加position: relative;する必要があります。#ck-button

#ck-button {
    margin:8px;
    background-color:#EFEFEF;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
    position: relative;
}

これがJSBinの実例です。（下にスクロールしてボタンを表示します）

于 2013-02-08T15:38:12.300 に答える