Question

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/tryit.asp?filename=trycss_navbar_horizontal_float_advanced
http://www.cssnewbie.com/full-width-centered-navigation-bar/

They kind of help but do not explain evenly spread out links. They either all float to the left or the right. Any assistance with this would be very appreciated.

Answer 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;
}

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

<ul>
  <li><a href="">LINK 1</a></li>
  <li><a href="">LINK 2</a></li>
  <li><a href="">LINK 3</a></li>
  <li><a href="">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…