Why is my navigation list reversed? [duplicate] - html

Question

This question already has answers here:
Float:right reverses order of spans
(16 answers)
Closed 6 years ago.
So I've run into this problem a few times, how come my navigation menu is reversed?
.navigation li a {
display: inline-block;
text-decoration: none;
float: right;
margin-right: 10px;
}
ul {
list-style-type: none;
}
<div class="container-fluid">
<nav class="navigation">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
When put into action, the menu order is reversed, why is this happening?

Answer 1

You let the elements float to the right. Try to picture that..
The first element enters the document and floats all the way to the right, bumping into the side of the screen. The second enters and floats to the right as well, but bumps into the left side of the first, and stays there. And so on, and so on.
A better solution would be to use display: inline-block for the elements, and float-right for the parent (the ul).
But personally I'm not a big fan of floating at all, so I would use text-align on the ul. text-align keeps it a normal line of text, which can also include images or other inline and inline-block elements. By right-aligning the text, the order of the words is not changed, but any remaining white space is just added to the left instead of to the right of the line:
.navigation li a {
display: inline-block;
text-decoration: none;
float: right;
margin-right: 10px;
}
.navigation li {
display: inline-block;
}
.navigation ul {
text-align: right;
}
<div class="container-fluid">
<nav class="navigation">
<ul>
<li>About
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>

Answer 2

This is happening because that's how float was designed. It will "float" the elements in the direction specified, in the order specified. If order is important, you can fix this in three ways:
Use the built-in Bootstrap alignment tools.
Apply float: right to the parent <ul> rather than each link.
Reverse the order of the elements.
In this case, you are floating elements to the right, in the order About > Portfolio > Contact. This is what happens:
About is floated right with no previous elements, so it sits against the farthest right wall of the parent container, <ul>.
Portfolio is floated right, but About is there already, so it gets as far right as it can, which puts it to the left of the previous element.
Contact is last to the party, so it ends up at the end of the line, farthest left.