如何实现div卡片列表的水平溢出滚动效果？

你之前的问题出在float: left和white-space: nowrap的组合上——white-space仅对行内元素/文本生效，而float会让卡片脱离正常文档流，导致无法实现横向不换行的效果。结合React-Bootstrap，推荐用以下两种方案解决：

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

通过Flex布局直接控制容器内卡片的排列规则，这是最稳定的实现方式：

.trending {
  display: flex;
  flex-wrap: nowrap; /* 强制卡片不换行 */
  overflow-x: auto; /* 横向溢出时显示滚动条 */
  gap: 1rem; /* 可选：设置卡片之间的间距 */
  padding: 1rem 0; /* 可选：上下内边距，避免卡片贴紧容器边缘 */
}

.mainCard {
  background-color: aqua;
  border-radius: 10px;
  flex-shrink: 0; /* 禁止卡片被压缩，保持原有宽度 */
  width: 280px; /* 可选：给卡片设置固定宽度，根据需求调整 */
}

React-Bootstrap组件使用示例：

import { Card } from 'react-bootstrap';

// 组件内部
<div className="trending">
  <Card className="mainCard">
    <Card.Body>
      <Card.Title>卡片1</Card.Title>
      <Card.Text>卡片内容...</Card.Text>
    </Card.Body>
  </Card>
  <Card className="mainCard">
    <Card.Body>
      <Card.Title>卡片2</Card.Title>
      <Card.Text>卡片内容...</Card.Text>
    </Card.Body>
  </Card>
  {/* 更多卡片 */}
</div>

方案二：行内块元素实现 #

如果偏好行内块的方式，需要去掉float并调整相关样式：

.trending {
  white-space: nowrap;
  overflow-x: auto;
  font-size: 0; /* 消除行内块元素之间的默认空白间隙 */
  padding: 1rem 0;
}

.mainCard {
  background-color: aqua;
  border-radius: 10px;
  display: inline-block;
  white-space: normal; /* 恢复卡片内部文本的正常换行 */
  font-size: 1rem; /* 恢复默认字体大小 */
  flex-shrink: 0;
  margin-right: 1rem; /* 设置卡片间距 */
  width: 280px; /* 可选：固定卡片宽度 */
}

两种方案都能实现「卡片始终横向排列，超出容器时显示滚动条」的效果，优先推荐Flex布局，因为它对元素排列的控制更灵活，也不需要处理行内块的间隙问题。

内容的提问来源于stack exchange，提问作者Danny Harani