css 列表成行排列

在CSS中，如果你想要将列表（如`<ul>`或`<ol>`）里的项目成行排列，可以使用`display: flex` 或 `grid` 属性，配合一些布局相关的属性来实现。以下是两种常见的方法：

1. **Flexbox** (弹性盒子模型)：
- 将包含列表的容器设置为 `display: flex;`
- 如果想让项目按行排列，你可以设置 `flex-direction: row;` 或默认值 `row-reverse`，后者会让项目从上到下倒序排列。
- 可选地，添加 `justify-content: space-between` 或 `align-items: center` 来调整项目之间的间距。

<ul class="flex-list">
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

<style>
.flex-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>

2. **Grid** (网格布局)：
- 首先，给包含列表的容器设置 `display: grid;`
- 设置 `grid-template-columns` 和 `grid-auto-flow: row` 来创建行式的网格。
- 使用 `grid-gap` 控制项目的间距。

<ul class="grid-list">
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

<style>
.grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 1rem;
}
</style>