Centered Navigation Bar And Links

I've been looking for a way to make a navigtion bar as wide as the page, and with links that are spead out evenly. I've looked as these two places: http://www.w3schools.com/css/try

Solution 1:

You have to work with percentage if I've understand your question.

Here a fast example:

ul {
  width: 100%;
  display: inline-block;
  background: green;
}

ulli {
  float: left;
  width: 25%;
  text-align: center;
}

<ul><li><ahref="">LINK 1</a></li><li><ahref="">LINK 2</a></li><li><ahref="">LINK 3</a></li><li><ahref="">LINK 4</a></li></ul>

with 4 items in list you need to set each LI width to 25%, with 5 items the width will be 20% and so on...

Solution 2:

As far as I know the only way to get evenly spread out elements is to use a <table> with a width of 100%. Every other solution would require you to specify a width in percent, which you might not know, because the number of links could vary.

Other than this you could still use javascript to find out how big the viewport of the broser is to specify the width. see this blog entry