Question

我正在尝试为ul菜单创建一个javascript算法，该菜单会延伸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>元素似乎没有用父元素那样延伸。

Answer 1

您也可以使用纯css而不是javascript方法，使用display: table元素上的ul属性和li元素上的display: table-cell：

看到这个小提琴：

http://jsfiddle.net/ERsrf/

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

table-layout:fixed;

Answer 2

这个答案可能有点渐进，因为它依赖于flexbox来完成繁重的任务。 Flexbox is only starting to be supported by IE10，因此在生产环境中可以可靠地使用这些技术之前可能还需要5年时间，除非您想忽略对IE的支持。

简单的解决方案是使<ul>成为一行flexbox并平等地展示所有<li>元素：

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

li {
    flex: 1;
}

当然，在实践中你需要添加浏览器前缀，因此CSS会大量增加。

Flexbox fiddle

Answer 3

将每个元素添加到像{ "width": 0, "number": 0, "LIs": [] }这样的对象的数组（var elems）中，按宽度对数组进行排序，然后获得额外空间量。之后（伪代码如下）：

    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

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

智能流体javascript导航助手

3 个答案: