Float:right reverses order of spans

Question

I have the HTML:

    Bookmix Offline
    

        
      

Answer 1

html

    

        
1
        
2
        
3
    

css

div{ 
    width:300px; 
    border:1px solid #000; 
    overflow:hidden; 
}
ul{
    padding:0;
    margin:0;
    float:right;
}
li{
    border:1px solid #000;
    text-align:center;
    float:left;
    margin:20px 5px;
    padding:5px;
    width:25px;
    list-style:none;
}