如何在菜单项之间平均填充填充以将菜单宽度拉伸到100％父div宽度？

Question

实现这一目标的最佳方法是什么（最常见的浏览器友好）？

我找到了一些相关问题＆amp;答案：

width: 100% / number_of_li-s_in_ul;

http://jsfiddle.net/qx4WG/（每个li的“静态”计算大小） - 无法使用不同大小的li

li {display: table-cell;} 

更新：http://jsfiddle.net/jwJBd/1035/ - ＆gt;效果很好，但我也使用子菜单和位置：相对; 在这里不能将子菜单定位在当前li下面。当position设置为 static 时，它会在每次设置显示时放大父LI：block;

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属性也是相关的。这样，<li>将设置为相等的宽度。

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