Having problem aligning 3 items in an <li>

Im having trouble aligning 3 elements in a list.

Here is the link to my problem:

http://mistirio.com/codecanyon/beta_flexi/

I the only way i could fetch those sliders and their labels in the correct form is by using : float: left; to each element.

But that puts them on the left of the page. Which is pretty obvious.

Doing nothing messes it up.

All help appreciated

Replace float: left with display: inline-block. The text-align: center that you have on a parent element will then center the sliders.

If you need IE6/7 support, use display: inline-block; *display: inline; zoom: 1. More info.

Best way would be to wrap them all then align to the right. ie:

<ul style="width:500px; text-align: right;">
    <li>Foo<input /></li>
    <li>Bar<input /></li>
    //etc...
</ul>