LI elements have float left to be aligned to the right in a container?

In this code the LI elements have float:left and are aligned to the left of the container. I want to make them aligned to the right. How do I开发者_如何转开发 do this with CSS?

For example: [..................................Item1.Item2]

Here is the HTML code:

<div class="menu">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
  </ul>
</div>

P.S. The order of LI's must not be reverse.

Try this

<div class="menu">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
  </ul>
</div>

CSS

.menu
{ float:right;
}
.menu li
{ float:left;
}

Or Use float:right to ul like

.menu ul
{ float:right;
}
.menu li
{ float:left;
} 

JSFiddle Example

Make the lis inline and put text-align:right on the ul

.menu li {
    display:inline;  
}
.menu ul {
    text-align:right;  
}

http://jsfiddle.net/XKARB/

reverse the order of the lis in your html, and use float: right