有没有一种方法可以将列表分成几列？

119

我的网页上有一个“瘦”列表：例如，一个100个项目的列表，每个项目的长度为一个单词。为了减少滚动，我想在页面的两列甚至四列中显示此列表。我应该如何使用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个项目，则无需进行很多手动调整即可容纳新列表。

css  html-lists 
— 用户名
source
有这确实是一个图书馆- github.com/yairEO/listBreaker
— VSYNC
我相信CSS列选项会做到。此选项易于使用，并在需要时进行更改。在这里，您已对其进行了详细说明-kolosek.com/css-columns
— Nesha Zoric，

Answers:

254

CSS解决方案是：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/

另一个解决方案是回退到正常float: left为仅IE。顺序将是错误的，但至少看起来类似：

请参阅： http ：//jsfiddle.net/NJ4Hw/

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

如果已经使用过后退，可以将它与Modernizr一起使用。

— 三十点
source
有没有办法删除li每列第一行的顶部边框？
— 是，巴里
2
这对于固定空间非常有用，但是由于列不会像使用display：inline或inline-block时那样折叠，因此在响应式设计中会遇到问题。
— Unifiedac
4
有趣的事实：IE是唯一不带前缀就完全支持此功能的主要桌面浏览器（自IE10起）...哦，具有讽刺意味的是
— NemoStein 2015年
1
为了更好地支持跨浏览器，可能需要包括此附加属性list-style-position: inside;，该属性专门解决了我认为@vsync指出的问题。
— ThisClark
4
@PrafullaKumarSahu：尝试li { break-inside: avoid; }：jsfiddle.net/thirtydot/pdExf/903。我对CSS列不太熟悉，因此可能会有更好的方法。
— thirtydot
19

如果您正在寻找一种适用于IE的解决方案，则可以将列表元素浮动到左侧。但是，这将导致列表四处乱动，如下所示：

item 1 | item 2 | item 3
item 4 | item 5

而不是整洁的列，例如：

item 1 | item 4
item 2 | 
item 3 |

这样做的代码是：

ul li {
  width:10em;
  float:left;
}

您可以在lis处添加一个下边框，以使项目从左到右的流动更加明显。

— 马特·汉佩尔
source
尽管它可能适用于特定数量的项目，但仅2个项目的结果将不尽人意。
— vsync
针对“整洁的列”的另一个有效的CSS解决方案：stackoverflow.com/q/54982323/1066234
— Kai Noack
10

如果需要预设的列数，可以使用如上所述的column-count和column-gap。

但是，如果您希望单个列的高度受限，并且在需要时可以分成更多列，则可以通过将显示更改为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>
展开摘要

— 麦琪（Maciej Poleski）
source
2
非常接近我要追求的目标。唯一的缺点是列的宽度不能适应内容（尝试使用不同长度的项目）。不知道如何定义列宽。也许与第一个元素在一起？无论如何，关于如何克服这一点的任何指示？
— jorgeh
可以限制列数而不是高度吗？我需要将这些项目填充到四列中，并且CSS column-count会在列中执行不均匀的行数。像在第一列6项，然后如图4所示，然后如图6所示，然后5.
— Virge突击
如果您标记项目（例如“项目1”，“项目2”），以便观看者可以看到元素的流程，
— 那就太好
3

这个答案并不一定要扩展，只需要随着列表的增加进行些微调整。从语义上来说，由于它是两个列表，因此似乎有点违反直觉，但是除此之外，它在任何浏览器中都可以满足您的需求。

ul {
  float: left;
}

ul > li {
  width: 6em;
}
<!-- Column 1 -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<!-- Column 2 -->
<ul>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>
展开摘要

— 艾伦·哈普（Alan Hape）
source
2

2020年-保持简单，使用CSS Grid

这些答案很多都已经过时了，那就是2020年，我们不应该让仍在使用IE9的人们得到支持。使用CSS网格更简单。

代码非常简单，您可以使用轻松调整多少列grid-template-columns。看到这个，然后玩这个小提琴以满足您的需求。

.grid-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
<ul class="grid-list">
  <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>
  <li>item</li>
  <li>item</li>
</ul>
展开摘要

— maxshuty
source
1
这对我来说是最好的解决方案。
— Patee Gutee
1

我发现（目前）Chrome（Version 52.0.2743.116 m）有很多怪癖和CSS问题column-count问题涉及溢出项和项中的绝对定位元素，尤其是在某些尺寸转换方面。

这是一团糟，无法修复，所以我尝试通过简单的javascript处理此问题，并创建了一个可以做到这一点的库-https: //github.com/yairEO/listBreaker

演示页面

— 垂直同步
source
我更喜欢jQuery columnizer插件，以我的观点，它具有更好的功能（能够按字母顺序排序，降序或升序，列数，列宽等）。jQuery的Columnizer - WelcomeToTheInter.Net
— Brandito
@Brandito-好吧，Columnizer代码肯定有更多选择，因为它差不多是1000行代码，而我的大约是120行..但做得很好
— vsync
是的，但是我的问题是需要将列表保留为一个列表，更有用/所需的取决于用例。
— 布兰迪托
0

如果可以支持，CSS Grid可能是将一维列表制作为具有响应性内部结构的两列布局的最简洁方法。

ul {
  max-width: 400px;
  display: grid;
  grid-template-columns: 50% 50%;
  padding-left: 0;
  border: 1px solid blue;
}

li {
  list-style: inside;
  border: 1px dashed red;
  padding: 10px;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
<ul>
展开摘要

这是两条关键线，它们将为您提供2列布局

display: grid;
grid-template-columns: 50% 50%;
— 马特·鲁姆斯
source
0

移动优先的方法是使用CSS列来创建较小屏幕的体验，然后使用媒体查询来增加布局的每个已定义断点处的列数。

ul {
  column-count: 2;
  column-gap: 2rem;
}
@media screen and (min-width: 768px)) {
  ul {
    column-count: 3;
    column-gap: 5rem;
  }
}
<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>
展开摘要

— 乔什·哈布达斯（Josh Habdas）
source
0

这是我所做的

ul {
      display: block;
      width: 100%;
}

ul li{
    display: block;
    min-width: calc(30% - 10px);
    float: left;
}

ul li:nth-child(2n + 1){
    clear: left;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>0</li>
</ul>
展开摘要

— 古鲁凯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.