智能流体 JavaScript 导航助手

我正在尝试创建一个 javascript 算法ul伸出的菜单li元素使用可用宽度 (100%)。

我正在考虑一个具有以下流程的算法：

1. calculate the entire available with
2. substract the total elements width to see what's left
3. iterate the elements and substract 1px from the left width and assign 
   it to the smallest li until the iterator runs out of width

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

编辑：提供的评论/答案还没有一个好的答案，因为也许一个或多个元素包含冗长的文本，并且这些元素不应该有任何额外的长度。该问题需要一个算法解决方案，因为每次迭代后只有最小的元素可以被视为剩余像素，因此菜单可以有效地拉伸

更新：对于那些困惑的人，这就是我希望它延伸的方式：

1. A bank has a total bankroll of 100 dollars
2. Jack has a 40% cut, Dennis has 6%, Minny has 1%
3. The bank starts handing out moneyz, 1 dollar each time starting with the
   poorest kid.
4. In the end Jack has 40% while Dennis and Minny have both 30%

Where the cuts stand for the number of characters in a li's child a node

注意：我已经阅读了使用表格显示的纯 css 解决方案，但这确实没有底层那么好<a>元素似乎不会以这种方式与父元素一起拉伸。

您还可以使用纯 css 而不是 javascript 方法来完成此操作，方法是使用display: table财产在ul元素和display: table-cell关于 li 元素：

看看这个小提琴：

http://jsfiddle.net/ERsrf/ http://jsfiddle.net/ERsrf/

如果你想强制li要使元素具有相同的宽度，请将此属性添加到ul元素 ：

table-layout:fixed;