如何将多个列表堆叠成行？

<ul class="list-container">
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
</ul>

.list-container {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-container li {
  display: inline-block;
  margin-right: 10px;
}

<div class="flex-container">
  <div>列表1</div>
  <div>列表2</div>
  <div>列表3</div>
</div>

.flex-container {
  display: flex;
}

.flex-container div {
  margin-right: 10px;
}

<div class="grid-container">
  <div>列表1</div>
  <div>列表2</div>
  <div>列表3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列，每列宽度相等 */
  grid-gap: 10px; /* 列之间的间距 */
}