html - 创建一个合理的、等间距的导航栏

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:after 部分，它使 align justify 启动并执行其操作。

jsfiddle:

http://jsfiddle.net/ZrT9T/