Grow your CSS skills. Land your dream job.

[Solved] Right aligning an inline list

  • # July 31, 2009 at 1:54 pm

    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:
    # July 31, 2009 at 2:08 pm

    You need the list to be in reverse order in the markup and to float the <li>’s to the right, then you can just position the <ul> however you want.

    Code:
    #list-container ul li {
    display: inline;
    float: right;
    list-style-type: none;
    }

    #list-container ul li a {
    display: block;
    height: 29px;
    padding: 8px 10px;
    background: #eee;
    }

    # August 1, 2009 at 1:54 pm

    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.

    # August 1, 2009 at 2:27 pm

    You could try text-align: right; but whatever you do if you want new menu items to be added to the left of the list then they will have to have a lower number in the page order preference. That’s just one of the idiosyncrasies of our "left to right" language system. Just imagine how difficult it must be to build a site in Hebrew or Arabic! :?

    # August 2, 2009 at 9:12 am

    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!

    # August 2, 2009 at 9:49 am

    Well if that’s all you want to do I don’t see what the problem is?
    I just tried it and it worked perfectly.
    Can you post a link?

    # August 3, 2009 at 7:42 am

    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.

    # August 4, 2009 at 8:38 pm

    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

    # August 5, 2009 at 4:14 am

    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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".