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

我在响应式网站设计上有一个导航菜单，我想填充容器的整个宽度，并且每个项目均匀间隔。我使用display：table和display：table-cell，但菜单选择之间的间距不均匀。使用CSS表格显示的不均匀间距

有什么建议吗？

这里的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; 
}

而这里的结果：

Resulting Menu

几个注意事项：

菜单项是动态的，所以他们能够”不能硬编码到特定的宽度。
相对位置是为了适应下拉菜单的位置。
我已经尝试过使用浮动。

任何帮助表示赞赏。

感谢，

来源

2015-03-02 Ty Morton

你可以在'li's上用填充玩耍。 http://codepen.io/anon/pen/QwBwgX – Chad 2015-03-02 20:03:24

您是否在寻找'table-layout：fixed;' – Stickers 2015-03-02 20:13:10

这些组合导致了解决方案。谢谢！ – 2015-03-02 22:31:10

我想你可以使用填充分离出来的元素

检查出这个演示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; 
}

来源

2015-03-02 19:57:43

这清盘做的伎俩：

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

这是三个评论/回复中的每一个的组合，因此我非常感谢。

来源

2015-03-02 22:30:38

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

回答

相关问题