新手网页设计师求助：如何将Testimonial Slider向左移动并分离背景

Hey，别着急！我看了你的代码和遇到的问题，咱们一步步来搞定这个 testimonial slider 左移的难题～

首先得说下你之前尝试的方法为啥没起作用：

• float-left 对设置了 display: flex 的容器完全无效，因为 flex 布局会忽略 float 属性；
• 用 margin-left 时背景变小，大概率是因为你的 .slider 容器宽度是默认的 auto，加了左外边距后容器本身被压缩，连带背景也跟着缩小了。

接下来给你几个具体的调整方案，你可以按需尝试：

方案1：让滑块整体靠左对齐（最基础的调整） #

修改 .slider 的 CSS，把居中对齐改成靠左对齐，同时确保容器占满宽度避免背景压缩：

.slider {
  height: 100%;
  position: relative;
  appearance: none;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  /* 把原来的 justify-content: center 改成 flex-start，让滑块靠左 */
  justify-content: flex-start;
  /* 新增：确保容器占满父元素宽度，防止背景缩小 */
  width: 100%;
  /* 可选：加个左边内边距，避免内容贴死左边 */
  padding-left: 2rem;
}

方案2：让滑块向左偏移，和背景融合（更贴合你的需求） #

如果想让滑块超出父容器左边，营造和背景融合的效果，可以用相对定位的 left 属性调整：

.slider {
  height: 100%;
  position: relative;
  appearance: none;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  /* 向左偏移3rem，数值可以根据你的需求调整 */
  left: -3rem;
  /* 记得给父容器设置 overflow: visible，不然左边会被截断 */
}

注意：要给 .slider 的父元素加上 overflow: visible，不然偏移出去的部分会被隐藏哦。

方案3：微调内容的内边距，让文字更靠左 #

如果觉得滑块内部的内容还是太靠中间，可以调整 .slider__contents 的内边距：

.slider__contents {
  height: 100%;
  /* 把左边的padding调小或者改成0，让内容更靠左 */
  padding: 2rem 2rem 2rem 0;
  text-align: center;
  display: flex;
  flex: 1;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

你可以先试试方案1，看效果后再按需叠加方案2或3，应该就能达到你想要的“和背景融合”的效果啦！

备注：内容来源于stack exchange，提问作者user21931161