Grow your CSS skills. Land your dream job.

Equidistant List Item spacing

  • # December 22, 2012 at 3:32 pm

    There is already a discussion, http://css-tricks.com/equidistant-objects-with-css/ however, I’m trying to get it to work with a UL/LI menu. It works fine using DIVs but as I’m trying to use it in a WordPress Template, I need it to work with an unknown number of UL/LI’s so percentages are no good.

    When I replace the container div with UL, the list doesn’t fill the overall space. This is what I’m trying

    .navbar ul {
    color: #000000;
    float: left;
    height: 125px;
    margin: 0 auto;
    text-align: justify;
    }
    .navbar ul li {
    display: inline-block;
    min-width: 60px;
    padding: 98px 0 0;
    text-align: center;
    }

    .navbar ul:after {
    content: ”;
    height:0px;
    width: 100%;
    display: inline-block;
    }

    compared to
    #main_nav {
    height: 125px;
    text-align: justify;
    margin: 0 auto;
    float: left;
    color: #000;
    }
    #main_nav div {
    display: inline-block;
    min-width: 60px;
    padding: 98px 0 25px 0;
    text-align: center;
    }
    #main_nav:after {
    content: ”;
    width: 100%;
    display: inline-block;
    }

    Which works fine.

    Regards
    Pete

    # December 23, 2012 at 7:25 am

    So this probably isn’t the final answer, but it might help along the way. My CodePen is [here](http://codepen.io/David_Leitch/pen/uifdL “http://codepen.io/David_Leitch/pen/uifdL”):

    I’ve found that adding padding: 0; to the container ul will take away the space to the left. This is because in a normal list, there is padding added for the list-decoration.

    Also, there are two or three pixels added to the right of the container ul. To eliminate this, I took out the whitespace in the HTML between the final li element in the closing ul tag. Strange that this would make a difference; whitespace is not often the culprit.

    Finally, when there are elements with no content, it tended to screw up the entire design. To combat this, I added vertical-align: top to the li elements, which kept them stuck to the top of the container, with content or without.

    The last problem that I can’t seem to sort out is a matter of min-width:
    When you narrow the viewport to make the container smaller than the elements within, it would push the final element to a new line (when min-width was equal to the total width of the elements). For some reason, increasing the min-width to

    ((width of elements*no. of elements) + (no. of gaps*4) )

    eg 512 for 5 elements of 100px width

    would eliminate this, but would leave gaps of 4px when the viewport is too narrow.

    So, it’s a start, but might need a bit more work :)

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

You must be logged in to reply to this topic.

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