Justify/Equally Spread List Items?

[Andy Howells]

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!

[Paulie_D]

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.

[Senff]

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

[Senff]

@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.

[Paulie_D]

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.

[Senff]

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.

[TechStudio]

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

[Chris Coyier]

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

[Author]

Posts