Question

下面是一段代码，它在其中设置一个复选框的样式，使其看起来像一个按钮，我遇到的问题是，当我点击复选框按钮时它是如何来的，它一直导航我到页面的顶部？

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

Answer 1

您需要将position: relative;添加到#ck-button选择器。

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

Here's a working example on JS Bin。（向下滚动以查看按钮）

单击按钮时，它会一直导航到页面顶部

1 个答案: