margin-left is adding space on right side of div

Question

I am building a nav and when I put margin-left: 20px on my nav ul li , it is pushing the div from the right side outward. Text-align is right. Interestingly, if I switch the float: left to f loat: right on the nav ul li , it doesn't push the text out, but it does reverse the order.

Please be gentle, I'm new at this stuff :)

Here is the 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>

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

Thanks! Jason

Answer 1

我不是100％理解这个问题，但是（在您的前3分之内）空的li会给人一种印象，那就是在“错误”的一面增加了边距？