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

Posted 2023-03-06

【中文标题】使用 CSS 表格显示的不均匀间距

【英文标题】：Uneven Spacing Using CSS Table Display

【发布时间】：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; 

结果如下：

一些注意事项：

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

感谢任何帮助。

谢谢，

ty

【问题讨论】：

您可以在lis 上使用填充。 codepen.io/anon/pen/QwBwgX

你在找table-layout: fixed;

这些的组合导致了解决方案。谢谢！

【参考方案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 的组合将我带到了那里，所以非常感谢。