Html 分离上一个和下一个按钮CSS

我正在制作一个供个人使用的幻灯片，但我很难将上一个按钮放在左边，下一个按钮放在右边。（见图）我在CSS中尝试了一些我认为可行但运气不佳的东西

我的标记：

<div id="image-wrap">
    <div id="title"></div>
    <div id="player">
        <div class="image image-1"><img src="img/image-1.png" alt="flamingo" data-desc="Flamingo eating in lake"></div>
        <div class="image image-2"><img src="img/image-2.png" alt="mountain range" data-desc="A mountain range with fog"></div>
        <div class="image image-3"><img src="img/image-3.png" alt="farmland" data-desc="A baron farmland"></div>
        <div class="image image-4"><img src="img/image-4.png" alt="ocean" data-desc="The clear ocean with boat views"></div>
        <div class="image image-5"><img src="img/image-5.png" alt="planes" data-desc="Planes in formation"></div>
        <div class="image image-6"><img src="img/image-6.png" alt="girl in field" data-desc="A girl gazing onwards in a field"></div>
        <div class="image image-7"><img src="img/image-7.png" alt="winter forest" data-desc="The winter forest"></div>
        <div class="image image-8"><img src="img/image-8.png" alt="forest" data-desc="Summer forest"></div>
        <div class="image image-9"><img src="img/image-9.png" alt="hillside" data-desc="Looking down upon the hills"></div>
        <div class="image image-10"><img src="img/image-10.png" alt="cliff" data-desc="From the cliff to the ocean"></div>
    </div>
    <div id="description"></div>
    <div id="controls">
        <img src="img/controls/prev.png" alt="" id="prev"><img src="img/controls/next.png" alt="" id="next">
    </div>
</div>

---

如何使“下一步”按钮显示在图像右侧？

您必须将

宽度：100%

添加到

#控件

容器中，并将

位置：绝对

添加到导航按钮中

#图像换行{
边框：7px槽#fd0；
高度：580px；
宽度：580px；
保证金：0自动；
位置：相对位置；
}
#标题、说明、控件{
显示：无；
z指数：999；
}
#图像换行：悬停#标题，
#图像换行：悬停#描述，
#图像换行：悬停#控件{
显示：块；
}
#控制{
位置：绝对位置；
顶部：钙（50%-29px）；
宽度：100%；
}
#控件#prev{位置：绝对；左：0；}
#控件#next{位置：绝对；右：0；}

---

我知道我忘记了一些显而易见的事情！谢谢

#image-wrap {
  border: 7px groove #fd0;
  height: 580px;
  width: 580px;
  margin: 0 auto;
  position: relative;
}

#title,#description,#controls {
  display: none;
  z-index: 999;
}

#image-wrap:hover #title,
#image-wrap:hover #description,
#image-wrap:hover #controls {
  display: block;
}

#controls {
  position: absolute;
  top: calc(50% - 29px);
}
#controls #prev { left: 0 }
#controls #next { right: 0 }