float right reverses list items?

[ifubad]

    #con ul li {
        display: inline;
        float: right;
    }

    <div id="con">
    <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
    </ul>
    </div>

 

I just noticed using float:right on a <ul> will display the <li> order in reverse (i.e. instead of displaying it as "Link 1 Link 2", it's "Link 2 Link 1"). Is the only way to work around this is to reverse the <li> order in the markup?

[JasonLewis]

Okay well you don't need float and the inline display. Try this out:

 

<style type="text/css">
    #con ul {
        float: right;
    }

#con li {
	float:left;
	list-style-type:none;
}
</style>

    <div id="con">
    <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
    </ul>
    </div>

[TheFilmGod]

    #con ul li {
        display: inline;
        float: right;
    }

    <div id="con">
    <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
    </ul>
    </div>

 

I just noticed using float:right on a <ul> will display the <li> order in reverse (i.e. instead of displaying it as "Link 1 Link 2", it's "Link 2 Link 1"). Is the only way to work around this is to reverse the <li> order in the markup?

 

Obviously this will be in reverse order, because you float the <li> right! - Why would you do that? You can float them left and float only the <ul> to the right. Unfortunately, that is still a poor way to lay the code out. If you explain what you are trying to achieve, I will be more than happy to help!

[ifubad]

after both replies, I now understand more on why it's doing what it's doing.

 

Obviously this will be in reverse order, because you float the <li> right! - Why would you do that?

 

Just practicing, trying to emulate the youtube home page. I now also see when display:inline is not necessary.

 

Thnx to both