将 CSS 中的 HTML 复选框放在另一个元素上时，如何去掉它的对角线偏移？

Question

我为my blog, however, the checkbox that activates the menu is for some reason slightly offset diagonally from the actual visible button elements. How do I change this (yes, I tried changing the positioning values, however, with no effect)? I'm aware there's a similar question here写了一个没有JavaScript的菜单，但是，它似乎是基于JS的，并且使用position: relative而不是position: fixed。我的相关 HTML 如下：

<nav>
    <input type="checkbox">
    <div id="oButton">
        Open menu
    </div>
    <div id="cButton">
        Close menu
    </div>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="/posts">Archive</a></li>
        <li><a href="/rss.xml">RSS Feed</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Source code</a></li>
    </ul>
</nav>

CSS 是这样的：

nav {
    color: Black;
    position: fixed;
    top: 1em;
    right: 1em;
    width: 6em;
    height: 1.5em;
    user-select: none;
    text-align: center;
    margin: auto;
}
nav input {
    display: block;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: pointer;
}
nav #oButton {
    position: absolute;
    top: 0;
    right: 0;
    width: 6em;
    height: 1.5em;
    z-index: 1;
    background: #3CE13B;
}
nav #cButton {
    position: absolute;
    top: 0;
    right: 0;
    width: 6em;
    height: 1.5em;
    z-index: 2;
    background: Orange;
    opacity: 0;
}
nav ul {
    position: absolute;
    top: 0.5em;
    right: 0;
    padding: 0.7em;
    width: 7.1em;
    background: #EEE;
    list-style-type: none;
    text-align: right;
    font-size: 0;
    opacity: 0;
    text-align: right;
    padding-top: 0.1em;
}

nav input:hover+#oButton {
    color:white;
}
nav input:hover~#cButton {
    color:white;
}

nav input:checked~#cButton {
    opacity: 1;
}
nav input:checked~ul {
    font-size: 1.5em;
    transition: opacity 0.25s linear;
    opacity: 1;
}
fantasycookie17@ChameleonBook: ~/fantasycookie17.onederfultech.com $ kak _site/static/menu.css
fantasycookie17@ChameleonBook: ~/fantasycookie17.onederfultech.com $ ./deploy.sh 
[info] Building from "/home/fantasycookie17/fantasycookie17.onederfultech.com/" into "/home/fantasycookie17/fantasycookie17.onederfultech.com/_site"
[info] Build successful
Enter passphrase for key '/home/fantasycookie17/.ssh/id_rsa': 
Successfully synced.
Enter passphrase for key '/home/fantasycookie17/.ssh/id_rsa': 
fantasycookie17@ChameleonBook: ~/fantasycookie17.onederfultech.com $ cat _site/static/menu.
cat: _site/static/menu.: No such file or directory
fantasycookie17@ChameleonBook: ~/fantasycookie17.onederfultech.com $ cat _site/static/menu.css 
nav {
    color: Black;
    position: fixed;
    top: 1em;
    right: 1em;
    width: 6em;
    height: 1.5em;
    user-select: none;
    text-align: center;
    margin: auto;
}
nav input {
    display: block;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: pointer;
}
nav #oButton {
    position: absolute;
    top: 0;
    right: 0;
    width: 6em;
    height: 1.5em;
    z-index: 1;
    background: #3CE13B;
}
nav #cButton {
    position: absolute;
    top: 0;
    right: 0;
    width: 6em;
    height: 1.5em;
    z-index: 2;
    background: Orange;
    opacity: 0;
}
nav ul {
    position: absolute;
    top: 0.5em;
    right: 0;
    padding: 0.7em;
    padding-top: 0.1em;
    width: 7.1em;
    background: #EEE;
    list-style-type: none;
    text-align: right;
    font-size: 0;
    opacity: 0;
    text-align: right;
}

nav input:hover+#oButton {
    color:white;
}
nav input:hover~#cButton {
    color:white;
}

nav input:checked~#cButton {
    opacity: 1;
}
nav input:checked~ul {
    font-size: 1.5em;
    transition: opacity 0.25s linear;
    opacity: 1;
}

Answer 1

尝试在复选框元素中添加 margin: 0，应该可以解决。

将 CSS 中的 HTML 复选框放在另一个元素上时，如何去掉它的对角线偏移？

How do I get rid of the diagonal offset of an HTML checkbox in CSS when placing it over another element?

html

css

checkbox

menu

css-position