导航菜单跨越整个容器宽度，具有恒定的水平填充

Question

我已经创建了一个导航菜单，如下面的屏幕截图所示。它跨越容器的整个宽度，每个菜单项的左/右填充是不变的。这很容易通过在CSS中对左/右填充进行硬编码来实现，但我希望填充能够在网站管理员编辑菜单时进行更改。

有没有办法用纯CSS（CSS3没问题）做到这一点？

这很容易用jQuery做（我总计了菜单项的宽度并计算了必要的填充）。但由于我们使用了Google Web Fonts，我在某些浏览器上遇到了一些问题。在Windows上的Chrome和Firefox 4（不在Mac上），我的脚本运行时未加载Web字体，导致宽度测量不正确。我尝试在jQuery's DOM ready event和Google Font API's active event中运行脚本。 active事件在Chrome中有效，但在Firefox 4中，它经常在应用字体之前被触发。

提前致谢。

Answer 1

这是jsfiddle of a potential different solution。

使用该布局，并假设菜单项的数量将会改变，一旦添加/删除列表项，就会调用重新计算方法。在提供的这个例子中，我使用YUI3来进行DOM操作，但是你可以通过多种方式实现。注意 - 我没有测试javascript函数，它的“可能是伪代码”。

（如果您正在尝试处理IE6 / 7，您可能需要从列表项宽度中减去2％左右）

Answer 2

根据用户thirtydot的建议使用jQuery的.load事件。