单独的上一个和下一个按钮CSS

Question

我正在制作一个供个人使用的幻灯片，我在尝试将左边的按钮和右边的下一个按钮放在上面时遇到了麻烦。 （见图）我在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>

CSS：

#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 }

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

Answer 1

您必须将width: 100%添加到#controls容器，将position: absolute添加到导航按钮。

#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);
  width: 100%;
}
#controls #prev { position: absolute; left: 0; }
#controls #next { position: absolute; right: 0; }

<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="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1" alt="" id="prev"><img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1" id="next">
    </div>
</div>