2

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

有没有办法用纯 CSS(CSS3 可以)来做到这一点?

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

提前致谢。

导航菜单截图

4

2 回答 2

0

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

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

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

于 2011-06-10T03:39:44.717 回答
0

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

于 2011-06-18T02:26:12.057 回答