Question

这些按钮应该绝对位于.gallery内，但出于某种原因，当我展开视口时，它们会延伸到图库外部并定位到视口。我在这里错过了什么吗？

HTML：

<section class="gallery">
  <div>
    <a href="http://www.cnn.com">
      <img src="/img/gallery-img-1.jpg" alt="Cover of lookbook">
     </a>
  </div>
  <ul>
    <li><a href="http://www.cnn.com"><img src="/img/gallery-img-1.jpg" alt="Cover of lookbook"></a></li>
    <li><a href="http://www.cnn.com"><img src="/img/gallery-img-2.jpg" alt="Some beautiful necklaces"></a></li>
    <li><a href="http://www.cnn.com"><img src="/img/gallery-img-3.jpg" alt="More beautiful necklaces"></a></li>
  </ul>
  <button class="arrow leftArrow">&lt;</button>
  <button class="arrow rightArrow">&gt;</button>
</section>

CSS：

.gallery {
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.gallery div, .gallery li:not(:first-child) {
  display: none;
}

.arrow {
  position: absolute;
  z-index: 9999;
  background-color: transparent;
  border: none;
  font-size: 2em;
  color: white;
  cursor: pointer;
  text-decoration: none;
}

.leftArrow {
  top: 40%;
  left: 5%;
}

.rightArrow {
  top: 40%;
  right: 5%;
}

Answer 1

好的，我修好了。我所要做的只是将display: inline-block;添加到.gallery并保持画廊的边界超出图像的宽度。感谢大家的帮助！

Answer 2

将图片的宽度从max-width更改为width:100%

img {
  width: 100%;
}

当视口变得大于图像大小时，会出现此问题。由于您设置了max-width: 100%，因此图像受到限制。箭头已正确定位，但图像停止展开以填充视口。

按钮没有绝对定位在部分

2 个答案: