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

【问题标题】：Uneven Spacing Using CSS Table Display使用 CSS 表格显示的不均匀间距
【发布时间】：2015-05-03 07:17:42
【问题描述】：

我在响应式网站设计上有一个导航菜单，我想填充容器的整个宽度，每个项目均匀分布。我正在使用 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; 
}

结果如下：

一些注意事项：

菜单项是动态的，因此无法硬编码为特定宽度。
相对定位是为了适应下拉菜单的放置。
我已经尝试过使用浮点数了。

感谢任何帮助。

谢谢，

【问题讨论】：

您可以在lis 上使用填充。 codepen.io/anon/pen/QwBwgX
你在找table-layout: fixed;
这些的组合导致了解决方案。谢谢！

标签： css responsive-design width

【解决方案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;
}

【讨论】：

【解决方案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;
}

是三个 cmets/responses 的组合将我带到了那里，所以非常感谢。

【讨论】：