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

我编写了一个没有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>

---

尝试将边距：0添加到复选框元素，它将解决该问题。

尝试将边距：0添加到复选框元素，它将解决该问题

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