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/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.

回答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...

回答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

来源：https://stackoverflow.com/questions/10405380/centered-navigation-bar-and-links