智能流体javascript导航助手

我正在尝试为

ul

菜单创建一个javascript算法，该菜单延伸

li

元素以使用可用宽度（100%）

我在考虑一个具有此流程的算法：

1。计算整个可用的
2.减去元素的总宽度以查看剩下的内容
3.迭代元素，从左宽度减去1px，然后赋值
直到迭代器的宽度用完，它将一直移动到最小的li

这是一个好的方法，还是会因为可能意味着几百次迭代而显得太滞后

编辑：所提供的评论/答案还不是很好的答案，因为可能有一个或多个a元素包含很长的文本，这些元素不应该有任何额外的长度。这个问题需要一个算法解决方案，因为在每次迭代后，只有最小的元素可以算作剩余像素，所以菜单可以有效地扩展

更新：对于那些困惑的人，这是我想要的伸展方式：

1。一家银行的资金总额为100美元
2.杰克减价40%，丹尼斯减价6%，米妮减价1%
3.银行开始发放moneyz，每次1美元，从
最穷的孩子。
4.最后，杰克拿到了40%，而丹尼斯和米妮都拿到了30%
其中，剪切表示li的子节点中的字符数

---

注意：我读过一个使用table display的纯css解决方案，但这并没有什么好处，因为底层的

元素似乎不会以这种方式与父元素一起拉伸。

您也可以通过使用

ul

元素上的

display:table

属性，使用纯css而不是javascript方法来实现和

显示：li元素上的表格单元格

：

看这把小提琴：

如果要强制

li

元素具有相同的宽度，请将此属性添加到

ul

元素：

table-layout:fixed;

---

这个答案可能有点进步，因为它依赖于flexbox来完成繁重的工作，因此，这些技术在生产环境中可靠地使用可能还要再过5年，除非您想忽略对IE的支持

简单的解决方案是将

设为一行flexbox，并将所有

元素同等地进行调整：

ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
}

li {
    flex: 1;
}

当然，在实践中，您需要添加浏览器前缀，因此CSS会有点膨胀

---

将每个元素添加到对象数组（变量元素）中，如

{“width”：0，“number”：0，“LIs”：[]}

，按宽度对数组排序，然后获得额外的空间量。之后（伪代码如下）：

---

这是一个非常粗糙的伪代码，逻辑可能并不完全正确，但它应该比一次添加一个像素快得多。

您到底想在这里实现什么？你说的ul菜单可以延伸到可用宽度（sic），但这可以通过多种方式实现。最简单的方法是通过分割剩余的宽度为每个li元素添加边距或填充。如果你有三个元素，剩下400px，400/（3*2）=66.6左右填充每个li。没有想到，这实际上是一个聪明的解决方案，如果你创建一个答案，我会接受它谢谢！实际上，这是行不通的，因为我有一个（或多个）带有长文本的元素，所以我不想添加任何内容。。需要进行算法设置。很遗憾，IE中不支持flexbox，否则这将非常简单。我有点困惑。。。有人能解释一下为什么“表格显示”不能做到这一点吗？你的例子令人困惑，你的数字来自哪里？你是在试图描述比例拉伸吗？问题是，当你在li节点上放置一个最大宽度和最小宽度时，这只模拟了我想要的，并且内部的a元素仍然没有拉伸以匹配它们的父liI。我已经更新了你的小提琴来说明问题，因为你可以看到较大的元素比其他元素大较小的，内部的A元素也没有覆盖li大小，导致可点击区域出现“空洞”这是我使用表格显示所获得的距离，但最小和最大宽度确实是静态帮助器。显然，如果设置li元素位置，它会停止firefox/ie：相对如果添加位置绝对安全ul（作为下拉列表）@user2298943如果在

a

元素上使用display:block，则它可以工作。看：这可能是最好的答案yet@user2298943，是的，那太完美了，我按照Brewal的建议做到了，但是你当然不希望像那样设置最大和最小宽度。。

    if(elems.length > 1) {
        while(extraSpaceLeft > 0) {
            leastWidth = elems object with lowest width;
            secondLeastWidth = elems object with second lowest width;
            toAdd = min(abs(leastWidth - secondLeastWidth),extraSpaceLeft);
            toAdd -= toAdd % leastWidth.number;
            extraSpaceLeft -= toAdd;
            leastWidth += toAdd/leastWidth.number;
            if(leastWidth.width === secondLeastWidth) combine the two objects
            else if(leastWidth.width > secondLeastWidth) swap the two objects in the array
        }
    } else { elems[0].width += extraSpaceLeft; }

    set the element width of each elem based on the elems widths