html - 单独的上一个和下一个按钮 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>