html - 如何在可变宽度的父级(多行)中均匀地间隔元素？

Question

所以我的网站上有一个 UL，其中包含大约 30 个列表项，每个列表项都包含一个宽度约为 130 像素的图标，因此列表会扩展到多行。

我遇到的问题很难解释，所以我尝试使用 this 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; 
}

所以我想要的是让每个列表项之间的空间是动态的，这样最右边的列表项就会触及屏幕的边缘，而不是出现间隙，直到有足够的空间容纳新的元素 list 。一旦有足够的空间让另一个列表项进入该行，元素之间的宽度就会重置。

恢复，转动这个:

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

在此:

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

希望这是有道理的，新来这里发帖，如果这在某些方面不正确，我们深表歉意。

Answer 1

如果我明白你的意思，那么你可以使用 flexbox:

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，或者只是希望支持最新的浏览器时才真正有效。