有没有办法把列表分成列？
我的网页有一个“瘦”的列表：例如，一个长度为100个单词的列表。 为了减less滚动，我想在页面上显示两个甚至四个列的列表。 我应该如何做到这一点与CSS？
<ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> 我更喜欢解决scheme是灵活的，所以如果列表增长到200个项目，我不必做很多的手动调整，以适应新的列表。
CSS解决scheme是： http : //www.w3.org/TR/css3-multicol/
浏览器支持正是你所期望的。
除Internet Explorer 9或更早版本之外，它“遍地”运行： http : //caniuse.com/multicolumn
ul { -moz-column-count: 4; -moz-column-gap: 20px; -webkit-column-count: 4; -webkit-column-gap: 20px; column-count: 4; column-gap: 20px; }
请参阅： http : //jsfiddle.net/pdExf/
如果需要IE支持，则必须使用JavaScript，例如：
http://welcome.totheinter.net/columnizer-jquery-plugin/
另一个解决scheme是回退到正常float: left 只有IE浏览器 。 顺序将是错误的，但至less会看起来类似：
请参阅： http : //jsfiddle.net/NJ4Hw/
<!--[if lt IE 10]> <style> li { width: 25%; float: left } </style> <![endif]-->
如果您已经在使用Modernizr，那么可以使用这个备用软件。
如果你正在寻找一个在IE中工作的解决scheme，你可以将列表元素浮动到左边。 但是，这将导致一个列表，如下所示：
item 1 | item 2 | item 3 item 4 | item 5
而不是整齐的列，如：
item 1 | item 4 item 2 | item 3 |
这样做的代码将是：
ul li { width:10em; float:left; }
您可以添加一个边框底部，使项目从左到右的stream动更加明显。
我发现（目前）铬（ Version 52.0.2743.116 m ）具有吨的怪癖和问题与css column-count溢出项目和绝对定位元素内的项目，特别是有些尺寸转换..
这是一个总的混乱，不能修复，所以我试图通过简单的JavaScript来解决这个问题，并创build了一个库，这样做 – https://github.com/yairEO/listBreaker
演示页面
如果需要预设数量的列，则可以使用列数和列间隔，如上所述。
然而，如果你想要一个高度有限的列，如果需要的话可以分成更多列，这可以通过将显示更改为flex来实现。
这不适用于IE9和其他一些旧的浏览器。 您可以检查支持我可以使用
<style> ul { display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Safari 6.1+. iOS 7.1+ */ display: flex; -webkit-flex-flow: wrap column; /* Safari 6.1+ */ flex-flow: wrap column; max-height: 150px; /* Limit height to whatever you need */ } </style> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul>
