有没有办法将列表分成列？ [英] Is there a way to break a list into columns?

问题描述

我的网页有一个'skinny'列表：例如，每个长度为一个词的100项的列表。为了减少滚动，我想把这个列表呈现在两个甚至四列的页面上。我应该如何使用CSS？

My webpage has a 'skinny' list: for example, a list of 100 items of one word in length each. To reduce scrolling, I want to present this list in two or even four columns on the page. How should I do this with 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>

我喜欢解决方案是灵活的，所以如果列表增长到200项，我不需要做很多手动调整来适应新的列表。

I prefer the solution to be flexible so that if the list grows to 200 items, I don't have to do a lot of manual adjustments to accommodate the new list.

推荐答案

CSS解决方案是： http://www.w3.org/TR / css3-multicol /

The CSS solution is: http://www.w3.org/TR/css3-multicol/

浏览器支持正是您所期望的。

The browser support is exactly what you'd expect..

除了Internet Explorer 9或更旧版本之外，它在无处不在中有效： http://caniuse.com/multicolumn

It works "everywhere" except Internet Explorer 9 or older: 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，例如：

If IE support is required, you'll have to use JavaScript, for example:

http：// welcome。 totheinter.net/columnizer-jquery-plugin/

另一种解决方案是回退到正常 float：left 仅用于仅IE 。该顺序是错误的，但至少它看起来类似：

Another solution is to fallback to normal float: left for only IE. The order will be wrong, but at least it will look similar:

查看：http://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

您可以使用 Modernizr ，如果您已经在使用它。

You could apply that fallback with Modernizr if you're already using it.

这篇关于有没有办法将列表分成列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！