I am attempting to create a horizontal navigation bar with evenly spaced links that span the entire width of the page. I currently have 6 links, each set to approximately 16.67% width, but this is not functioning as expected.
Using 16.5% width works initially, however, when resizing the page, the last item in the navigation bar drops down to the next line. Is there a method to prevent this and ensure that the links remain centered across all window sizes?
Additionally, is there a way to disable users from resizing the window to a size where the links either overlap or are not fully displayed?
Here is the code I have implemented so far:
#navbar {margin:0; padding:0; overflow:hidden; width:100%;}
li {width:100%}
li a {padding: 6px 3px; float:left; width:16.5%; text-align:center;}
<ul id='navbar'>
<li><a href='#'> 1 </a></li>
<li><a href='#'> 2 </a></li>
<li><a href='#'> 3 </a></li>
<li><a href='#'> 4 </a></li>
<li><a href='#'> 5 </a></li>
<li><a href='#'> 6 </a></li>
</ul>