创建对齐，等间距的导航栏

Question

我在这里浏览了几页并发现了一些几乎符合我需求的东西，就是在网页上有一个导航栏，所有链接彼此间隔相等，仿佛是合理的，并且有8％的填充左侧和右侧，以便导航栏的背景跨越页面的宽度，但包含链接的内容不超过8％的限制。

我没有代码，因为我删除了它并且前一段时间去了另一个设计，但由于我想重温这个想法，我希望有人可以给我一个解决方案。之前我使用的方法包括在导航栏下面设置一个宽度设置，但高度为0的空。但是，即使高度为0，我仍然最终得到一个下面有额外空间的导航栏，占用了一些高度，破坏了大多数导航栏上下的对称性。举一个例子，我所指的过多空间是绿色位：

Answer 1

听起来这篇文章就是你要找的东西：

http://code.jelmerdemaat.nl/2012/perfectly-justified-css-grid-technique-using-inline-block/

简而言之，您希望代码看起来像这样：

CSS：

.wrapper{
  width: 550px;
  text-align: justify;
  margin: 20px auto;
}

.wrapper div{
  background: white;
  display: inline-block;
}

.wrapper div:first-child {
    padding-left: 8%;
}

.wrapper div:last-child {
    padding-right: 8%;
}

.wrapper:after{
  content: "";
  width: 100%;
  display: inline-block;
}

/* Only to see effect better */
body{ margin: 0; font-family: sans-serif; font-size: 12px;}
.wrapper,.wrapper div{ padding: 5px; }

HTML：

<div class="wrapper">
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
</div>

魔法在.wrapper中：在代码的一部分之后，这使得对齐合理地启动并完成它的东西。

的jsfiddle：

http://jsfiddle.net/ZrT9T/

Answer 2

Codrops在完全合理（并且垂直居中）的标题上做了一个帖子，可能符合您的需求。

http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/

我从来没有听说过这个8％的技巧，所以我无法帮助你完全合理的标题的具体实现。