中心导航栏和链接

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来查明更为明亮的视口有多大来指定宽度。 see this blog entry