智能流体javascript导航助手 [英] Smart fluid javascript navigation helper
问题描述
我试图为 ul 菜单创建一个javascript算法，该菜单会展开 li 元素，宽度（100％）。
I am trying to create a javascript algorithm for an ul menu that stretches out li elements to use the available width (100%).
我正在考虑这个流程的算法：
I was thinking about an algorithm with this flow:
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
这是一个很好的方法，否则会太迟了，因为它可能意味着几个一百个迭代？
Is this a good approach or will this be too laggy because it could mean a few hundred iterations?
编辑：提供的评论/答案还没有一个好的答案，因为或许一个或多个元素持有冗长的文本，任何额外长度。该问题需要一个算法解决方案，因为只有最小的元素可以在每次迭代之后剩下的像素，所以菜单被有效strectched
The comments/answers provided don't hold a good answer yet, as perhaps one or many a elements hold lengthy text and these shouldn't get any extra length. The problem needs an algoritmic solution as only the smallest element can be accounted the left over pixel after each iteration so the menu is efficiently strectched
更新：对于那些困惑这是我想让它伸展：
UPDATE: For those confused this is the way I want it to stretch:
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的解决方案，但是真的不是什么好的基础<$ c
Note: I have read a solution in pure css using table display but that really isn't any good as the underlying <a> elements don't seem to stretch with the parent element that way.
推荐答案
您也可以使用纯CSS而不是javascript方法，使用 ul display：table $ c>元素和 display：table-cell 上的li元素：
See this fiddle :
看到这个小提琴：
如果要强制 li 元素具有相同的宽度，请将此属性添加到 ul 元素：
If you want to force the li elements to have the same width, add this property to the ul element :
table-layout:fixed;
这篇关于智能流体javascript导航助手的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
