[分享]css列表变成两排

CSS列表是网页开发中非常重要的元素，它可以展示网页内容的层次结构和组织方式。但是，在一些情况下，我们可能需要把CSS列表变成两排来实现更好的排版效果。本篇文章就将通过pre标签展示CSS代码和p标签...

CSS列表是网页开发中非常重要的元素，它可以展示网页内容的层次结构和组织方式。但是，在一些情况下，我们可能需要把CSS列表变成两排来实现更好的排版效果。本篇文章就将通过pre标签展示CSS代码和p标签展示文章段落的方式来讲解如何将CSS列表变成两排。

/* CSS代码 */

ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 划分两列*/
  list-style: none; /* 去除默认样式 */
  justify-items: center; /*水平居中 */
}

li {
  padding: 10px;
} 

如上所示，我们可以先将ul标签设置为网格布局，将一列分成两列（即repeat(2, 1fr)），然后去掉li标签的默认样式，设置padding值让列表项更加美观。最后，为了让列表项竖直靠拢，我们还可以设置justify-items为center实现水平居中。

这时，我们就可以看到CSS列表已经变成了两排的效果，一行显示两个列表项。这种布局方式通常应用在产品展示、菜单和品牌介绍等页面中。比如，在电商网站上，我们可以将商品和品牌按照这种方式排列展示，提高产品展示效果和用户体验。

总的来说，将CSS列表变成两排是一种简单有效的排版方式，不仅可以让网页更加美观，还可以展示网页内容的层次结构和组织方式。通过pre标签展示CSS代码和p标签展示文章段落的方式，本篇文章给大家介绍了如何实现CSS列表变成两排的方法。