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 */
}