根据JS中的菜单项确定菜单项的大小 [英] Size menu items based on how many there are in JS

问题描述

我需要有一个菜单，该菜单中的项目会根据项目的数量自动调整大小.说，有三个项目.每个容器的宽度约为容器的33％.但是，如果有十个，每个将有10％.有人有任何想法/建议吗?谢谢！

I need to have a menu that has items that size themselves based on how many there are. Say, there are three items. Each one would have about 33% width of the container. But if there were were ten, each would have 10%. Does anyone have any ideas/suggestions? Thanks!

推荐答案

通常，菜单是从无序列表中构建的，并且父菜单元素具有id ="menu"在这种情况下，您将需要以下代码:

Usually menu is built from unordered list and parent menu element have id="menu" In this case you'll need code like next:

menuElt = document.getElementById('menu');
childElements = menuElt.getElementsByTagName("li");
var quantity = childElements.length;
var widthPercent = Math.round(100/quantity);
for (var i = 0; i < quantity; i++) {
  childElements[i].style.width = widthPercent + "%";
}

这篇关于根据JS中的菜单项确定菜单项的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！