margin-left在div的右邊增加空間

Question

我正在構建導航，當我在nav ul li上margin-left: 20px插入margin-left: 20px時，它會將div從右側向外推。 文本對齊是正確的。 有趣的是，如果我在nav ul li上將float: left切換為f loat: 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％理解這個問題，但是（在您的前3分之內）空的li會給人一種印象，那就是在“錯誤”的一面增加了邊距？