html - 如何将此 CSS 菜单拉伸到 100%

Question

这是一个很棒的CSS 菜单：

唯一的缺点是它没有拉伸到 100%……如果它有 2 个元素，它应该是 50%/50%，如果有 4 个项目，那么 25%/25%/25%/25% 就像它们是表格单元格一样。怎么做？我是 CSS 新手。

Answer 1

使用display: table/table-cell（适用于现代浏览器和 IE8+）和display-table.htc（适用于 IE6/7）。

Answer 2

修改其宽度，100%使菜单跨度为全宽。

#myfantasticmenu { width: 100%; }

我用萤火虫模拟了变化，所需的样式定义是

#nav {
    overflow: hidden; /* To clear the div */
    width: 100%;
}

关于这部分，当项目为 4 时，两个需要 50/50，每个需要 25，你将需要一些 javascript 来执行此操作。

如果您考虑使用 jQuery，那么它将类似于

childs= $("#myfantasticmenu").children('a'); //grab the list items
childs.css('width', (100/childs.length)+%);

---

如果避免编写脚本是您的主要目标，那么将表格带入游戏中，它们会自动执行您需要的行为。