在流体布局中创建中心对齐菜单

Question

我试图创建一个＆＃34;中心对齐＆＃34;菜单以流畅的布局保持其外观。

我从这开始：

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的建议（谢谢！），但它确实有效，但现在我正在努力解决这些元素之间的间距不一致的问题：

我该怎么办？

Answer 1

我相信你正在寻找CSS表格布局。

JSfiddle Demo

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

1）在列表中使用text-align: justify;，并将其与margin: 0 auto;

居中

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

FIDDLE （我添加了边框以显示效果）

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;