居中的导航栏和链接

Question

我一直在寻找一种方法来制作与页面一样宽的导航栏，并且链接分布均匀。我看过这两个地方：

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced http://www.cssnewbie.com/full-width-centered-navigation-bar/

他们有点帮助，但没有解释均匀分布的链接。它们要么都向左浮动，要么向右浮动。对此的任何帮助将不胜感激。

Answer 1

如果我理解你的问题，你必须使用百分比。

这里是一个简单的例子：

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>

列表中有 4 个项目，您需要将每个 LI 的宽度设置为 25%，如果有 5 个项目，宽度将为 20%，依此类推...

Answer 2

据我所知，让元素均匀分布的唯一方法是使用宽度为 100% 的 <table>。其他所有解决方案都需要您以百分比指定宽度，您可能不知道，因为链接的数量可能会有所不同。

除此之外，您仍然可以使用 javascript 来找出 broser 的视口有多大来指定宽度。 see this blog entry