如何从单个无序列表创建多列? [英] How can I create multi columns from a single unordered list?

问题描述

我想创建一个这样的多列列表:https://jsfiddle.net/37dfwf4u/

I'd like to create a multi column list like this: https://jsfiddle.net/37dfwf4u/

为每一列使用不同的列表时没有问题:

No problem when using a different list for each column:

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<ul>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>

ul {
    display:inline-block;
}

但是，这是否可以通过连续列表和纯 CSS 来完成，以便 CSS 自动排列列?例如.通过使用我还不熟悉的 flex 布局?

However, can this be done by a continuous list and pure CSS so that the CSS arranges the columns automatically? E.g. by use of flex layout which I'm not yet familiar with?

推荐答案

是的，如果您使 ul 成为一个 flex 容器，您可以创建一个多列列表，更改 flex-direction 到 column，通过应用 flex-wrap: wrap 允许它包裹，另外通过限制它的 height 强制它包裹>:

Yes, you can create a multi column list as described if you make the ul a flex container, change the flex-direction to column, allow it to wrap by applying flex-wrap: wrap and additionally force it to wrap by limiting its height:

ul {
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17</li>
  <li>item 18 </li>
  <li>item 19</li>
  <li>item 20</li>
  <li>item 21</li>
</ul>

这是另一种可能性，在@Andrew Koper 发表评论半年后添加:

Here's another possibility, added half a year later after the comment by @Andrew Koper:

您还可以使用 colummn-count 参数，该参数不需要固定高度(也不需要 flex)，但定义了固定列数.所以在下面的例子中，即使只有两个列表项也会被分成两列，每列一个列表项:

You can also use the colummn-count parameter, which doesn't require a fixed height (and also not flex), but defines a fixed number of columns. So in the example below, even just two list items would be broken into two columns of one list item each:

ul {
  column-count: 2;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17</li>
  <li>item 18 </li>
  <li>item 19</li>
  <li>item 20</li>
  <li>item 21</li>
</ul>

这篇关于如何从单个无序列表创建多列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！