导航菜单以恒定的水平填充跨容器的整个宽度

问题描述

| 我已经创建了一个导航菜单，如下面的屏幕截图所示。它跨越了容器的整个宽度，每个菜单项的左/右填充是恒定的。通过在CSS中对左/右填充进行硬编码很容易做到这一点，但是我希望当站点管理员编辑菜单时能够更改填充。 有没有办法用纯CSS做到这一点（CSS3可以）？ 这对于使用jQuery很简单（我总计了菜单项的宽度并计算了必要的填充）。但是由于使用Google Web字体，我在某些浏览器中遇到了一些问题。在Windows（而不是Mac）上的Chrome和Firefox 4上，在我的脚本运行时未加载Web字体，导致宽度测量不正确。我尝试在jQuery \的DOM ready事件和Google Font API \的active事件中运行脚本。

active

事件在Chrome中有效，但在Firefox 4中，它经常在应用字体之前被触发。 提前致谢。     

解决方法

        这是一个潜在的不同解决方案的摘要。 使用该布局，并假定菜单项的数量将要更改，一旦添加/删除了列表项，就调用一种重新计算方法。在提供的这个示例中，我使用了YUI3来进行DOM操作，但是您可以通过多种方式进行操作。注意-我没有测试javascript函数，它的“可能工作的伪代码”。 （如果您要处理IE6 / 7，则可能需要从列表项的宽度中再减去2％左右）     ,        按照用户三十点的建议使用jQuery的

.load

事件。