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

Posted

技术标签:

【中文标题】使用 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 的组合将我带到了那里,所以非常感谢。

【讨论】:

以上是关于使用 CSS 表格显示的不均匀间距的主要内容,如果未能解决你的问题,请参考以下文章

仅使用 HTML 和 CSS 在图像顶部显示表格

HTML CSS表格如何控制上下间距

CSS 表格边框

在表格单元格边框间距 CSS 中可以看到隐藏的行/列

第18章 CSS表格与列表

如何使用透明间距/边框在行之间留出空间 - HTML/CSS