html - margin-left 在 div 的右侧添加空间

Question

我正在构建一个导航，当我将 margin-left: 20px 放在我的 nav ul li 上时，它会将 div 从右侧向外推。文本对齐是正确的。有趣的是，如果我在 nav ul li 上将 float: left 切换为 float: right，它不会推出文本，但它确实颠倒了顺序。

请保持温柔，我是新手:)

这是 HTML:

<nav>
    <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
        <li></li>
    </ul>
</nav>

还有 CSS:

nav {
    margin: 20px 0;
    float: right;
}
nav ul li, nav ul li a {
    text-align: right;
    float: left;
    font-size: 20px;
    color: #ff5800;
}
nav ul li {
    margin-left: 20px;
}
nav ul li a:hover {
    color: #44cc00;
}

谢谢!杰森

Answer 1

不是 100% 我理解这个问题，但是空的 li(在你的前 3 点之下)是否会给人一种印象，它是在“错误”的一边添加边距？