2

我正在尝试为扩展元素以使用可用宽度（100%）的ul菜单创建一个 javascript 算法。li

我正在考虑使用此流程的算法：

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

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

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

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

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>元素似乎并没有以这种方式与父元素一起拉伸。

4

3 回答 3

3

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

看到这个小提琴：

http://jsfiddle.net/ERsrf/

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

table-layout:fixed;
于 2013-05-17T16:00:19.877 回答
2

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

简单的解决方案是制作<ul>一行 flexbox 并<li>平等地弯曲所有元素：

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

li {
    flex: 1;
}

当然，在实践中你需要添加浏览器前缀，所以 CSS 会变大一点。

Flexbox 小提琴

于 2013-05-17T16:02:07.853 回答
1

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

    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

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

于 2013-05-17T18:07:04.113 回答