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

Question

我创建了一个导航菜单，如下面的屏幕截图所示。它跨越容器的整个宽度，每个菜单项的左/右填充是恒定的。这很容易通过硬编码 CSS 中的左/右填充来实现，但我希望填充能够随着站点管理员编辑菜单而改变。

有没有办法用纯 CSS（CSS3 可以）来做到这一点？

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

提前致谢。

Answer 1

这是一个潜在的不同解决方案的 jsfiddle。

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

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

Answer 2

按照用户三十多点的建议使用 jQuery 的.load事件。