有没有办法把列表分成列?

我的网页有一个“瘦”的列表:例如,一个长度为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>