[Solved] Right aligning an inline list

[GurtFrobe]

I have an unordered list (<ul>) with list items (<li>) that contain anchor links (<a>). These anchors display inline thanks to a float:left and have a chunky background thanks to a display: block, a width and a height.

I am stuck now because I want all of this to be right aligned in a container div so that when a new link is added, the list grows horizontally to the left. New list items will be added dynamically through WordPress so it all has to be fluid.

I’ve tried experimenting with floating the list right, absolutely positioning a containing div to the right and nothing does what I am after.

Any help would be most appreciated.

Here is a mockup of what I have so far.

Code:

• Link 1
• Link 2
• Link 3

[GurtFrobe]

Thanks for the speedy reply.

I have tried this and it does work, though I was hoping there might be another way. This site is for a client and It’d be nice to not have to ask them to ensure they order their pages in reverse order.

[GurtFrobe]

I have tried using text-align to position the list but that doesn’t seem to do what i’m after as well. When new items are added to the list I want them to appear on the right of the list – in the normal way. That bit is fine, it’s getting the list to sit on the right hand side of the page and grow in to the left that’s proving tricky.

It’s mad how this seems like a simple thing to do but it’s causing me lots of headaches. It must be possible, when I crack it I am writing a tutorial on it!

[GurtFrobe]

I think I just confused matters with that last post.

I have however solved the problem. I floated the list items right and then wrote a custom function that reverses the order they are displayed in. This way the pages can be ordered correctly in the back end and the front end.

Thanks for you time though Apostrophe. Much appreciated.

[runa]

Gurt,
there is indeed a solution with CSS to display the markup 1,2,3 as 3,2,1 for it for that special case that all list-items have the same length that is given by design and not by the length of the Link. That could be the case in breadcrumb navigations like home > articles > first article.

Firstly, all list-items have to float to the right and have to have a certrain width (of 100px for example):

Code:

#list-container ul li {
display: block;
float: right;
width: 100px;
}

Finally you apply an addition rule:

Code:

#list-container ul li + li { margin-right: 100px; }

It says that every list-item that follows another one, will be moved to the left by margin-right by the same amount that the width of the list-items is.

Bye, Helen

[GurtFrobe]

Thanks for the tip Runa.

Unfortunately I cannot set the list items to have a fixed width because I cannot be sure how big the next one will be. My client requires the freedom to add new list items and know that it will work – no matter how wide they are.

I have managed to get it working using some extra parameters on the wp_list_pages function in WordPress that flip the order they are displayed.

[Author]

Posts