使用CSS表格显示的不均匀间距

Question

我在响应式网站设计上有一个导航菜单，我想填充容器的整个宽度，每个项目均匀分布。我正在使用display：table和display：table-cell，但菜单选项之间的间距不均匀。

有什么建议吗？

这是CSS代码：

ul#top-nav {
  margin: 14px auto;
  width: 80%;
  display: table;
  text-align: center; }

ul#top-nav li {
    display: table-cell;
    font-size: 16px;
    line-height: 16px;
    color: #959484;
    text-transform: uppercase;
    position: relative;
    margin: 0;
    height: 30px; 
}

这是结果：

一些警告：

1. 菜单项是动态的，因此无法将其硬编码为特定宽度。
2. 相对定位可以容纳下拉菜单的位置。
3. 我已经尝试过使用花车了。

感谢任何帮助。

谢谢，

TY

Answer 1

我认为您可以使用填充来分隔元素

查看此演示http://jsfiddle.net/x9rzbm9p/4/

.table {
    display: table-cell;
    border: 1px solid;
    width: 100px;
    height: 70px;
}
.cell {
    display: table-cell;
    padding: 30px; 
    border: 1px solid;
    box-sizing: border-box;
    text-align center;
}

Answer 2

这就结束了这个伎俩：

ul#top-nav li {
    display: table-cell;
    font-size: 16px;
    line-height: 16px;
    color: #959484;
    text-transform: uppercase;
    position: relative;
    margin: 0;
    height: 30px; 
    padding: 0 1%;
    table-layout: fixed;
    white-space: nowrap;
}

这是导致我在那里的三个评论/回复中的每一个的组合，所以非常感谢你。