Question

所以我在我的网站上有一个包含大约30个列表项的UL，每个列表项包含一个大约130px的图标，因此列表扩展为多行。

我遇到的问题很难用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; 
}

所以我想要的是每个列表项之间的空间是动态的，并使其远远接触屏幕边缘的列表项而不是出现间隙，直到有足够的空间容纳新的项目清单。一旦有足够的空间让另一个列表项进入该行，项目之间的宽度就会重置。

恢复，转过来：

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

在此：

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

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

Answer 1

据我所知，只能使用javascript实现。

试用Isotope插件。最小化版本约为15kb。

https://github.com/desandro/isotope/blob/master/jquery.isotope.min.js

Answer 2

如果我了解您之后的内容，那么您可以使用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/

HOWEVER ，支持目前相当有限（http://caniuse.com/flexbox），所以只有找到合适的polyfill，或者只是想支持最新的浏览器才能真正起作用。

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

2 个答案: