CSS列表如何橫向排列

在CSS中，可以使用flex布局或grid布局將列表橫向排列。

1、flex布局

使用flex布局，可以將列表元素設(shè)置為flex容器中的項(xiàng)目，并設(shè)置flex-direction屬性為row，使列表元素橫向排列。

.container {
  display: flex;
  flex-direction: row;
}
.list-item {
  flex: 1;
}

2、grid布局

使用grid布局，可以將列表元素設(shè)置為grid容器中的項(xiàng)目，并設(shè)置grid-template-columns屬性為repeat，使列表元素橫向排列。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.list-item {
  grid-column: span 1;
}

兩種方法都可以實(shí)現(xiàn)列表元素的橫向排列，具體使用哪種方法可以根據(jù)實(shí)際需求進(jìn)行選擇，在排版時(shí)需要注意保持工整，避免出現(xiàn)排版混亂的情況。