This question has been previously raised on Stack Overflow with an insightful answer provided. However, I am encountering a specific problem in implementing it.
My objective is to have a navigation bar (nav consisting of ul and its li items) occupy the entire width, or 80% of the width, evenly divided between items.
The primary goal is to center the navigation bar and ensure that each item occupies equal space. A solution proposed on Stack Overflow involves using the content: "" hack after the ul. Although this works well for single-word li items, it causes alignment issues with two-word items as shown in the screenshot.
If there isn't a straightforward way to eliminate this issue, are there any hacks available to reduce the extra spacing? I've created a jsFiddle here, although it may not fully depict the extent of the problem.
Thank you for your help.
HTML:
<article class="main home">
<img class="heroLogo" src="media/TM-Logo-4.png">
<nav>
<div class="menuIcon"></div>
<ul>
<li><a href="http://www.google.com">One</a></li>
<li><a href="http://www.google.com">One</a></li>
<li><a href="http://www.google.com">One</a></li>
<li><a href="http://www.google.com">Two longWords</a></li>
<li><a href="http://www.google.com">One</a></li>
<li><a href="http://www.google.com">One</a></li>
<li><a href="http://www.google.com">One</a></li>
</ul>
</nav>
</article>
CSS:
.menuIcon {
display: none;
}
nav, nav:hover {
width: 80%;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
font-size: 1.2em;
text-align: center;
}
nav ul, nav:hover ul, nav ul.clicked, nav ul.none {
width: 100%;
display: block;
text-align: center;
text-align: justify;
}
nav ul:after {
content: '';
display: inline-block;
width: 100%;
}
nav li {
width: 100%;
display: inline;
padding: 0;
margin: 0;
}