从左到右而不是从上到下制作列表

在 HTML 中，通常使用 <ul> 和 <li> 标签来创建列表。默认情况下，列表是从上到下向下排列的。但是，有时您可能需要创建一个从左到右而不是从上到下的列表，例如用于显示电影海报或产品展示。

方法一：使用display: inline-block

使用display: inline-block，可以将列表项从左到右排列，而不是从上到下排列。示例代码如下：

ul {
  white-space: nowrap; // 防止换行
}

li {
  display: inline-block; // 行内块元素
  vertical-align: top; // 顶部对齐
  white-space: normal; // 可以换行
}

方法二：使用 flexbox

使用flexbox，我们可以通过设置 flex-direction: row 使元素从左到右排列。示例代码如下：

ul {
  display: flex;
  flex-wrap: nowrap; // 防止换行
  overflow-x: auto; // 横向滚动
}

li {
  flex: 0 0 auto;
}

方法三：使用 grid

使用grid，我们可以通过设置 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 来创建一个自适应的网格布局，使元素从左到右排列。示例代码如下：

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); // 自适应网格布局
  grid-auto-rows: minmax(150px, auto); // 均等高度
  grid-gap: 10px; // 间距
  justify-content: space-between; // 左右两端对齐
  align-items: center; // 垂直居中
}

总结

以上三种方法都可以实现从左到右而不是从上到下制作列表。使用 inline-block 可以让列表项依次排列，使用 flexbox 可以创建一个弹性盒子，在盒子中灵活排列元素，并让元素自动适应可用空间，使用 grid 可以创建一个网格布局，让元素按列或行排列，并实现等高或自适应高度。根据实际情况选择不同的方法。