引用轮播组件上一页与下一页箭头未对齐问题求助

算力阿峰

2026-7-18

引用轮播组件箭头对齐问题修复

核心问题及修复步骤：

CSS里的position: abosolute是拼写错误，需改为position: absolute，这是箭头无法正确定位的关键原因。
父容器.slideshow必须设置position: relative，否则绝对定位的箭头会以整个页面为参照，而非轮播容器。
.next箭头需要单独设置位置和圆角，实现靠右对齐并修正圆角方向。

修正后的完整代码：

HTML：

<div class='slideshow'>
  <div class='slides'>
    <q>When you give up your hunger for success you are not racing full heartedly anymore.</q>
    <p class='author'>- Felipe Massa</p>
  </div>

  <a class='prev' onclick='plusSlides(-1)'>&#10094;</a>
  <a class='next' onclick='plusSlides(1)'>&#10095;</a>
</div>

（注：顺便修正了原文里的拼写错误：junger→hunger，sucess→success）

CSS：

.slideshow {
  position: relative; /* 新增：给父容器设置相对定位 */
  width: 80%; /* 可根据需求调整宽度 */
  margin: 0 auto; /* 居中显示 */
}

.prev, .next {
  cursor: pointer;
  position: absolute; /* 修正拼写错误 */
  top: 50%; /* 基于父容器垂直居中 */
  transform: translateY(-50%); /* 精准垂直居中，适配不同高度箭头 */
  width: auto;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 3px 0 0 3px;
  user-select: none;
}

.next {
  right: 0; /* 让next箭头靠右 */
  border-radius: 0 3px 3px 0; /* 调整圆角方向 */
}