如何调整图片上传预览为单行排列，实现类品牌滑块效果？

核心调整逻辑 #

现有预览功能的JS文件读取、文件存储、预览追加逻辑不需要大改，只需要通过CSS修正列表的布局规则，解决默认列表项自动换行的问题，就能实现单行横向排列、超宽横向滚动的品牌滑块效果。

具体调整步骤 #

1. 新增/覆盖对应布局CSS #

/* 外层预览滚动容器 */
.col {
  /* 替换原内联样式的overflow:auto，只保留横向滚动 */
  overflow-x: auto;
  overflow-y: hidden;
  /* 可选：开启顺滑滚动，匹配滑块交互体验 */
  scroll-behavior: smooth;
  /* 可选：美化滚动条样式 */
  scrollbar-width: thin;
}

/* 仅选中存放预览图的ul列表，避免影响左侧Add Photo区域的布局 */
ul.ipl.cvf_uploaded_files {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 强制横向排列不换行 */
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  /* 给滚动容器留内边距，避免图片贴边 */
  padding: 4px 2px;
}

/* 单个预览项的li */
ul.ipl.cvf_uploaded_files > li {
  position: relative;
  /* 关键：防止flex布局下图片被压缩变形 */
  flex-shrink: 0;
  width: 100px;
  height: 100px;
}

/* 预览缩略图 */
.img-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* 删除按钮定位 */
.cvf_delete_image {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  text-decoration: none;
}

/* 外层row容器调整对齐，让Add Photo按钮和预览区域垂直居中 */
.row {
  align-items: center;
}

2. 修正现有代码的小bug #

你现有的JS拼接预览HTML时，存在一个标签闭合错误，会导致删除按钮的图标无法正常显示，需要修正：

• 原错误代码：

"<a href = '#' class = 'cvf_delete_image' title = 'Cancel'><i class='fas fa-times cross'><i/></a>"

• 修正为正确的闭合结构：

"<a href='#' class='cvf_delete_image' title='Cancel'><i class='fas fa-times cross'></i></a>"

最终效果说明 #

调整完成后：

• 所有上传的预览图会固定在同一行横向排列，不会因为宽度不足自动换行
• 预览图数量超过容器宽度时，会自动出现横向滚动条，实现类似品牌合作伙伴滑块的交互效果
• 每个预览图尺寸统一，不会被拉伸变形
• 左侧Add Photo按钮和右侧预览区域保持垂直居中对齐，视觉上更统一

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