如何按比例调整溢出列表元素的大小并适合屏幕？

Question

我想这样做：

我有一个包含 N 个元素的内联列表。元素可以分别有不同的宽度，列表可以溢出屏幕。需要设置每个项目的宽度，以便所有元素都适合屏幕。

---

问题：

但是有一个问题。当你确实将窗口大小调整到最小，然后再次拉伸到初始宽度时，所有元素的宽度就等于——失去了原来的比例，不必要地在每个列表中可以写出各种宽度的文本。

http://jsfiddle.net/v2pwww/42PdV/2/

可能的解决方案：

您可以记住数组中每个项目的宽度，并将窗口折叠后的宽度增加到存储在数组中的宽度。 联系数组和列表项可以是 arr(N) 和 ul.list li:nth-child(N)。 也许还有其他解决方案。

我不知道该怎么做，请帮忙 :)

Answer 1

我不知道这是否正是您所追求的，但您可以使用属性来存储初始宽度。

 $(document).ready(function() {
    $('ul.list li').each(function(index) {
        $(this).attr("initial-width",$(this).innerWidth());
    });

然后代替

     $(this).innerWidth($(this).innerWidth() - res);

使用

     $(this).innerWidth($(this).attr("initial-width") - res);