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

Question

我想这样做：

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

---

问题：

但有一个问题。当您确实将窗口大小调整到最小值，然后再次拉伸到初始宽度时，所有元素的宽度都等于-丢失了原始比例，在不必要的情况下，每个列表中都可以写入不同宽度的文本。

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

可能的解决方案：

您可以记住数组中每个项目的宽度，并在窗口折叠后将宽度增加到数组中存储的宽度。联系数组，列表项可以是arr（N）和ul.list li:nh子项（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);