Equidistant List Item spacing

[pzh20]

There is already a discussion, https://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

[David_Leitch]

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 :)

[Author]

Posts