Forums

  • # September 7, 2012 at 2:08 pm

    Hi all,

    I’m trying to figure a way to equally space list items in a horizontal nav. (Link below to dev site).

    At the moment they have equal widths of 12.5% – which is great for the LI element and text is centered horizontally. So if I was to draw a box/add a background it would look fine.

    However, if you look at the link below, you can see the undesired effect is that because they have no background/spacers they all look out of space/misaligned.

    Anyone have any tips on how to cure this problem without adding a box/background and to make them appear to be justified evenly? I’m having trouble thinking of a fix.

    Note that the design is responsive.

    Just for reference the menu I mean is the subnavigation under the slideshow area that has “Anti Aging” and “Body” in it.

    Link to draft site

    Cheers in advance!

    # September 7, 2012 at 2:19 pm

    Not much you can do about that…the links are different lengths. Other than changing the order of the list to see if you can even it out, I can’t see any way around it.

    # September 7, 2012 at 2:22 pm

    I would suggest using flexbox to make sure all spacing is equal?

    # September 7, 2012 at 2:38 pm

    @andy_unleash : yea, I was a bit too quick with my comment. It’s too experimental it seems, so better not use it.

    If I would have this issue myself, I would just give each LI a specific width though, so that it’s spaced exactly the way I want to.
    Sure, some people would consider it a cop-out, but…..it would give me the result I’d be looking for. And you don’t have to cater to the people who insist on having a “cleverer” solution.

    # September 7, 2012 at 2:40 pm

    Unless you are intrinsically opposed to them, perhaps a very light right/left border.

    http://codepen.io/Paulie-D/pen/FJqDg

    I just used ‘lightgrey’ but you could go lighter.

    # September 7, 2012 at 2:42 pm

    Or you could remove the widths from the LI’s and just give them all a padding of 26 or 27 pixels left/right. Problem is that browsers render it a little differently so it might wrap to the next line. In that case, set it to 25 pixels and center the UL a little more precise.

    # September 7, 2012 at 6:40 pm

    Using table and table-cell for the display property can get the job done fairly well. Support varies for it so I’d test it and plan some browser contingencies if you use it.

    http://codepen.io/ryanburnette/pen/HDItb

    # September 7, 2012 at 7:33 pm

    Or maybe just make the list items `display: inline;` and `text-align: center’` the UL. using padding where appropriate to space out.

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag