Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Justify/Equally Spread List Items?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #39719
    Andy Howells
    Participant

    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!

    #109494
    Paulie_D
    Member

    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.

    #109495
    Senff
    Participant

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

    #109498
    Senff
    Participant

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

    #109499
    Paulie_D
    Member

    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.

    #109500
    Senff
    Participant

    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.

    #109514
    TechStudio
    Member

    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

    #109515
    Chris Coyier
    Keymaster

    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)
  • The forum ‘CSS’ is closed to new topics and replies.