Javascript 如何制作并排div元素？

您好，我的react应用程序组件中有事件列表。我想把它们并排展示，而不是一一展示。我试着用flexbox做这件事，但有点不对劲。谢谢你的帮助

.flex容器{
显示器：flex；
}
.地方名单{
弹性：1；
保证金：1rem自动；
填充：0；
宽度：100%；
最大宽度：20%；
}

flex容器需要连接到flex元素的父级

您的flex容器是您希望成为flex元素的元素的祖辈。它只有一个孩子

---

具有类

位置列表的元素

需要将每个

的输出打包，而不是将它们全部打包。

位置项

是具有类名

位置列表

的元素的子元素，而不是

flex容器

。 试试这个：

。位置列表{
显示器：flex；
}

您的CSS应该如下所示：

.flex-container {
  display: flex;
  justify-content: center; /* You could also align left, right, ect. */
}


.place-list {
  flex: 1;
  margin: 1rem auto;
  padding: 0;
  width: 100%;
  max-width: 20%;

}

---

这将对齐一行中的子元素。

子元素（单数）已在一行（一个项目的）中。您建议的更改只是将其水平对齐到中心。您应该定义.flex容器的大小。默认设置为0。代码笔示例：