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;
}
So this probably isn't the final answer, but it might help along the way. My CodePen is here:
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 elementsno. of elements) + (no. of gaps4) )
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 :)
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 {
}
main_nav div {
}
main_nav:after {
}
Which works fine.
Regards Pete
So this probably isn't the final answer, but it might help along the way. My CodePen is here:
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 elementsno. of elements) + (no. of gaps4) )
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 :)