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;
}

这是一个关于 JS Bin 的工作示例。（向下滚动查看按钮）

于 2013-02-08T15:38:12.300 回答