使用 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
【问题讨论】:
您可以在li
s 上使用填充。 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 表格显示的不均匀间距的主要内容,如果未能解决你的问题,请参考以下文章