如何让可滚动卡片列表在屏宽>1500px时固定左侧且占满全屏宽度

API 探路者

2026-10-2

解决方案

修改思路

移除媒体查询中.list-wrapper的固定宽度与左右自动边距设置，让容器占满整个屏幕宽度，保证滚动区域可以延伸到屏幕右边缘，不会提前截断
用动态计算的左内边距控制列表起始位置，保证屏幕宽度大于1500px时，列表左侧位置与1300px居中内容的左边缘对齐，不会随屏幕宽度增大向左偏移

完整修改后的代码

CSS 部分

.list-wrapper {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  margin-right: 10%;
}

.card {
  height: 180px;
  width: 130px;
  background-color: yellow;
  margin-right: 40px;
}

@media screen and (min-width: 1500px) {
  .list-wrapper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: calc((100vw - 1300px) / 2);
    /* 可选：右侧添加对称留白，滚动到最右侧时卡片不会贴住屏幕边缘 */
    padding-right: calc((100vw - 1300px) / 2);
  }
}

HTML 部分（仅修正了非规范的自闭合div写法，原有逻辑无变动）

<div class="list-wrapper">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>