Having problem aligning 3 items in an

Question

Im having trouble aligning 3 elements in a list.

Here is the link to my problem:

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

score 2 · Accepted Answer · edited May 23 '17 at 11:55

2

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.

edited May 23 '17 at 11:55

Community

answered Aug 17 '11 at 00:31

thirtydot

That did it.! Thanks a lot.. In 9 minutes ill be allowed to mark this as read :) – Michael Schinis Aug 17 '11 at 00:34

score 1 · Answer 2 · answered Aug 17 '11 at 00:33

1

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>

answered Aug 17 '11 at 00:33

red

I thought of that, but that actually messes up my original stylesheet, so i have to keep the structure the same.. If you refresh now, you will see the original stylesheet. My concern was, what happens if someone removes the stylesheet. Thirtydot's answer fixed this.. – Michael Schinis Aug 17 '11 at 00:36
1

New design is much better, and my solution is ill-designed for this. Glad you got your answer =) – red Aug 17 '11 at 00:38

2 Answers2