css - 不均匀间距使用 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. 我已经尝试过使用花车了。

感谢任何帮助。

谢谢，

类型

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