有没有办法将列表分成几列？

问题描述 投票：0回答：11

我的网页有一个“瘦”列表：例如，一个包含 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
11个回答
301
投票

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
only IE。顺序会错，但至少看起来很像：

参见： http://jsfiddle.net/NJ4Hw/

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

如果您已经在使用它，您可以使用 Modernizr 应用该回退。

25
投票

现在是 2023 年 - 保持简单，使用 CSS 
grid
或 
column-count

这些答案中有很多已经过时了，现在是 2022 年了，我们不应该让那些仍在使用 IE9 的人能够使用。使用CSS grid或

column-count
更简单。

代码非常简单，您可以使用

grid-template-columns
或
column-count
轻松调整有多少列。

grid
解决方案： 

.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>

column-count
维持秩序的解决方案：

.column-list {
  column-count: 4;
}
<ul class="column-list">
  <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>
</ul>

21
投票

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

但是，如果您想要一个高度有限的单列，如果需要的话可以分成更多的列，这可以通过将显示更改为 flex 来非常简单地实现。

这不适用于 IE9 和其他一些旧浏览器。您可以在 我可以使用

上查看支持吗 

<style>
  ul {
    display: flex;
    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>

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;
}

您可以在 

li
中添加一个底部边框，使项目从左到右的流动更加明显。

3
投票

这个答案不一定scale但只需要随着列表的增长进行微小的调整。从语义上讲，它可能看起来有点违反直觉，因为它是 two 列表，但除此之外，它在任何浏览器中看起来都是您想要的方式。

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>

3
投票

移动设备优先的方法是使用 CSS Columns 为较小的屏幕创建体验 然后 使用 Media Queries 在布局定义的每个断点处增加列数。

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>

1
投票

我发现（目前）Chrome (

Version 52.0.2743.116 m
) 有很多关于溢出项目和项目内绝对定位元素的 css 
column-count
的怪癖和问题，特别是一些维度转换..

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

演示页面

1
投票

如果你能支持它，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%;
1
投票

li{
width:50%
}

ul{
display:flex;
flex-wrap:wrap
}
<ul>
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
<li>List Item4</li>
<li>List Item5</li>
<li>List Item6</li>
<li>List Item7</li>
<li>List Item8</li>
<li>List Item9</li>
<li>List Item10</li>
</ul>

这是最简单的方法之一，你可以通过改变li的宽度来指定需要的列数。并使 ul 显示 flex 并仅包装元素。

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>

0
投票

我的 WordPress 网站中有一个无序列表。对于那些遇到过类似问题（使其响应）的人，CSS如下。享受吧！😁

/*BASED ON THE ACCEPTED ANSWER*/
.elementor-icon-list-items {
  -moz-column-count: 4;
  -moz-column-gap: 20px;
  -webkit-column-count: 4;
  -webkit-column-gap: 20px;
  column-count: 4;
  column-gap: 20px;
}


/*RESPONSIVE CODE FROM HERE*/

@media (max-width: 769px) {
  .elementor-icon-list-items {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 577px) {
  .elementor-icon-list-items {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 416px) {
  .elementor-icon-list-items {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}
<ul class="elementor-icon-list-items">
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 1</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 2</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 2</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 3</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 4</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 5</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 6</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 7</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 8</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 9</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 10</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 11</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 12</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 13</span>
  </li>
</ul>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.