css - 如何平均填充菜单项之间的填充以将菜单宽度拉伸(stretch)到 100% 父 div 宽度？

Question

什么是最好的无 JS 方式(最常见的浏览器友好)来实现这一点？

我找到了一些相关的问题和答案:

width: 100% / number_of_li-s_in_ul;

http://jsfiddle.net/qx4WG/ (每个 li 的“静态”计算大小)- 由于 li 的大小不同而无法使用

li {display: table-cell;} 

更新:http://jsfiddle.net/jwJBd/1035/ -> 效果很好，但我也在使用子菜单，position: relative; 在这里无法将子菜单定位在当前 li 下方。当 position 设置为 static 时，它会在每次设置为 display:block 时放大父 LI；

display: box;

没用过，看了几篇文章，好像浏览器支持很少

Answer 1

如果我对您的问题的理解正确，您希望像表格一样均匀地显示菜单元素，并且能够使用绝对和相对定位显示 css 子菜单。

你的 jsfiddle 很接近，我唯一需要修复的是子菜单的定位

.sub-menu {
    display: none;
    /*left: 0;*/ /* i removed this */
    position: absolute;
    /* PLAY with this */
}

jsFiddled here

[后期编辑]

设置您的 <li> 也很重要父级 table-layout:fixed属性(property)。这样，<li>将被设置为等宽。

#horizontal-style {
    display: table;
    width: 100%;
    table-layout:fixed; /* try this */
}