1

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

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

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

4

2 回答 2

2

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

这是一个快速的例子：

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%，依此类推...

于 2012-05-01T22:48:32.520 回答
0

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

除此之外，您仍然可以使用javascript来找出broser的视口有多大来指定宽度。看到这个博客条目

于 2012-05-01T22:51:54.870 回答