在流体布局中创建居中对齐菜单答案

【问题标题】：Create Center-Justified Menu in Fluid Layout在流体布局中创建居中对齐菜单
【发布时间】：2015-02-07 13:25:51
【问题描述】：

我正在尝试创建一个“居中对齐”菜单，以保持其流畅布局的外观。

我从这个开始：

ul#top-nav {
  margin: 0 auto;
  width: 80%; }

ul#top-nav li {
  float: left;
  font-size: 1rem;
  line-height: 1rem;
  margin: 14px 2% 0 0;
  color: #959484;
  text-transform: uppercase; }

ul#top-nav li:last-of-type {
  margin: 14px 0 0 0; }

这让我得到了这个，这正是我想要的：

但是，当浏览器窗口的宽度扩大时，边距不能正确缩放，我明白了：

我知道我可以输入媒体查询来调整<li> 元素的边距百分比，但我宁愿让它真正流畅。我也知道可能有 jQuery 方法来解决这个问题，但如果可能的话，我想将其保留在 CSS 中。

想法？

更新：

我使用了 Paulie_D 的建议（谢谢！），它奏效了，但现在我正在为元素之间的间距不一致而苦苦挣扎：

我该怎么办？

【问题讨论】：

你能提供一个快速的jsfiddle吗？这样如果可行的话我们就可以抢购了？

标签： css text-alignment justify

【解决方案1】：

1) 在您的列表中使用 text-align: justify; 并将其与 margin: 0 auto; 居中

2) 添加伪元素以将项目拉伸到最大宽度

FIDDLE（我添加了边框来可视化效果）

.wpr {
  border-top: 2px solid #111;
  border-bottom: 2px solid #111;
}
ul {
  text-align: justify;
  min-width: 500px;
  width: 80%;
  display: block;
  margin: 0 auto;
  border: 1px solid tomato;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}
li {
  display: inline-block;
  padding-top: 16px;
  box-sizing: border-box;
}

<div class="wpr">
  <ul>
    <li><a href="#">VISIT</a>
    </li>
    <li><a href="#">EVENTS</a>
    </li>
    <li><a href="#">EXHIBITIONS</a>
    </li>
    <li><a href="#">COLLECTIONS</a>
    </li>
    <li><a href="#">LEARN</a>
    </li>
  </ul>
</div>

【讨论】：

【解决方案2】：

我相信 CSS 表格布局正是您想要的。

JSfiddle Demo

ul {
  display: table;
  width: 80%;
  text-align: center;
  margin: 0 auto;
}
li {
  display: table-cell;
  background: #ccc;
}
a {
  text-decoration: none;
  display: block;
}

<ul>
  <li><a href="#">Item 1</a>
  </li>
  <li><a href="#">Item 2</a>
  </li>
  <li><a href="#">Item 3</a>
  </li>
  <li><a href="#">Item 4</a>
  </li>
  <li><a href="#">Item 5</a>
  </li>
  <li><a href="#">Item 6</a>
  </li>
  <li><a href="#">Item 7</a>
  </li>
  <li><a href="#">Item 8</a>
  </li>
</ul>

【讨论】：