[分享]css列表怎么排成两列

在网页设计中，列表是十分常见的元素，常常被用来展示一些信息、商品或其他内容。然而，在某些情况下，我们希望将列表分成两列来显示，以更好地利用页面的空间。下面将介绍如何使用CSS实现这种效果。 第一行第一...

在网页设计中，列表是十分常见的元素，常常被用来展示一些信息、商品或其他内容。然而，在某些情况下，我们希望将列表分成两列来显示，以更好地利用页面的空间。下面将介绍如何使用CSS实现这种效果。

<ul class="two-columns">
  <li>第一行第一列</li>
  <li>第一行第二列</li>
  <li>第二行第一列</li>
  <li>第二行第二列</li>
  <li>第三行第一列</li>
  <li>第三行第二列</li>
</ul> 

首先，我们需要将列表内容包裹在一个ul元素中，并为该元素添加一个类名，如“two-columns”，以便在CSS中进行样式调整。

.two-columns {
  -webkit-column-count: 2; /* Safari 和 Chrome */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
} 

接下来，在CSS中，我们需要将该类名的元素分成两列，利用CSS3的column-count属性，将该属性值设置为2即可。需要注意的是，这个属性值必须不小于2，因为如果只有1列，则并没有实现分列的效果。