如何在可变宽度父级(多行)中均匀分隔元素？

Question

所以我在我的网站上有一个UL,有大约30个列表项,每个列表项包含一个大约130px的图标,所以列表扩展到多行.

我遇到的问题很难解释如此恶意尝试使用这个jsfiddle.

    ul { 
       display: table; margin: 10px auto; 
    }

    li { 
       float: left; list-style: none; margin-left: 5px; padding: 5px 0; 
    }
    li a { 
       background: #82B5DA; 
       border: 1px solid #599CCE; 
       border-radius: 3px; 
       padding: 5px; color: #333; 
       text-decoration: none; 
}

所以我想要的是每个列表项之间的空间是动态的,并使其远远接触屏幕边缘的列表项而不是出现间隙,直到有足够的空间用于新的列表项.一旦有足够的空间让另一个列表项进入该行,则重置项之间的宽度.

恢复,转过来:

|[aaaaaaaaa][bbbbbbbbbb][cc]       |
|[dddddddddddddddddddbb][eeeee]    |

在这:

| [aaaaaaaaa]  [bbbbbbbbbb]  [cc] |
| [dddddddddddddddddddbb]  [eeeee]|

希望这是有道理的,如果这在某种程度上不正确,那么在这里发布的新内容如此道歉.

Answer 1

如果我明白你想要什么，那么你可以使用弹性盒：

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

像这样：

ul {
    display: flex;
    margin: 10px auto;
    padding: 0 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}

演示： http: //jsfiddle.net/5grwG/19/

然而，目前的支持相当有限（http://caniuse.com/flexbox），所以只有当你能找到一个像样的polyfill，或者只是想支持最新的浏览器时，这才真正有效。