Right Align an inline UL which is inside a div

I have a pagination output which is show within

. An example is posted here: http://jsfiddle.net/6N4bD/1/

The ul is wrapped around 2 divs

1st div is 550 width 2nd div called "paginationDiv" basically wraps the ul around

The ul has list-style: none. What I am trying to do is make it float right, but it keeps appearing as a block. I have tried quite a few things but nothing seems to work. If I add a width to the paginationDiv then it works but it's not accurate because it will never be fixed width

Here is what it looks like:

<div class="parentDiv">
   <div class="paginationDiv">
      <ul id="paginationLinks">
        <li>Page 1</li>
        <li>Page 2</li>
      </ul> 
    </div>
 </div>

That's the html code

Here is the css:

div.parentDiv { 
  width: 550px; 
}
div.paginationDiv {
  float: right;
}
#paginationLinks ul {
  border: 0;
  padding: 0;
  margin: 0;
}
#paginationLin开发者_如何学运维ks li {
  list-style: none;
}

I have posted an example here: http://jsfiddle.net/6N4bD/1/

---

What seems to work is adding display: inline; to the li elements.

http://jsfiddle.net/XFdqT/ has a demo of this.

---

give float:left to #paginationLinks li and then see the result