如何在React Material UI中实现自定义Carousal并解决图片换行问题

要让轮播里的所有图片保持在同一行，核心是通过CSS强制容器内的图片不换行，以下是两种可行方案：

方案一：Flex布局（推荐） #

给轮播的外层容器添加flex布局，并禁止子元素换行：

.carousal {
  display: flex;
  flex-wrap: nowrap; /* 强制所有子元素在一行 */
  overflow-x: auto; /* 当图片总宽度超过容器时，显示横向滚动条 */
  /* 可选：隐藏滚动条 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousal::-webkit-scrollbar {
  display: none;
}

再给图片设置固定宽度，同时禁止压缩：

.carousal img {
  flex-shrink: 0; /* 防止图片被压缩变形 */
  width: 300px; /* 根据需求自定义宽度 */
  height: auto;
}

方案二：Inline-block + White-space #

如果不想用flex，也可以通过设置容器的white-space属性实现：

.carousal {
  white-space: nowrap; /* 强制容器内内容不换行 */
  overflow-x: auto;
}

.carousal img {
  display: inline-block; /* 让图片以行内块形式排列 */
  width: 300px;
  height: auto;
}

关键逻辑说明 #

默认情况下，块级容器内的图片如果总宽度超过容器宽度，会自动换行。通过flex-wrap: nowrap或white-space: nowrap可以强制所有图片保持在同一行，overflow-x: auto则保证超出容器的部分可以横向滚动，避免页面布局错乱。

内容的提问来源于stack exchange，提问作者Rana Faraz