Do LI elements have a float on the left to align on the right in the container?

Question

In this code, the LI elements have float: left and are aligned to the left of the container. I want them aligned right. How to do it using CSS?

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

Here is the HTML code:

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

PS The order of LI should not be inverse.

Answer 1

try it

 <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

Answer 2

Make li inline and put text-align:right on ul

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

http://jsfiddle.net/XKARB/

Answer 3

change li order in your html and use float: right