Question

我正在使用两个箭头键进行图像滑块，问题是当我尝试将视口更改为更小时。图像滑块响应地改变了它的大小，但箭头键没有。不知道如何将它们附加到图像滑块并使它们响应。当从显示器切换到我的PC时，我发现了这个问题，分辨率较小，右箭头键消失了。

以下是我斗争的例子。 jsfiddle

<div class="container">
  <div class="slider"><img src="https://i.ytimg.com/vi/suIr-M1p8yU/maxresdefault.jpg" alt="">           </div>

  <div class="arrows index">
    <a href="#" class="left"><</a>
    <a href="#" class="right">></a>
  </div>
</div>



 .container{

  max-width:1100px;
  margin: 0 auto;
  width:100%;
  height: auto;
}
.slider{
  position:relative;
}

.slider img{
  position:absolute;
  width:100%;
  height:auto;
  left:0;
  top:0;
  object-fit:cover;
}

.arrows {
  font-size: 3.125em;
  position: relative;
  width: 100%;
}

.arrows .left {
  position: absolute;
  color: white;
  top: 8em;
  left: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
}

.arrows .right {
  position: absolute;
  color: white;
  top: 8em;
  left: 20.2em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
}

Answer 1

为什么你给右箭头的左边属性赋予如此高的价值？如果您使用正确的属性，它可能会起作用：

SELECT id_student FROM students WHERE name+' '+surname LIKE full_name

要修复垂直定位，您应该删除图像的绝对位置。通过这样做，您的滑块将具有与图像相同的高度。然后你可以将你的箭头绝对定位在滑块内（你需要更改html）它应该可以工作

Answer 2

这是因为你给了一个固定左边的箭头我会建议而不是left: 20.2em;使它成为right: 0.4em 所以决赛将是：

.arrows .right {
  position: absolute;
  color: white;
  top: 8em;
  right: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
}

上面的部分已经在我写答案时已经回答了，关于你对按钮贴上图像的评论。

css将是：

.container{

  max-width:1100px;
  margin: 0 auto;
  width:100%;
  height: auto;
}
.slider{
  position:relative;
  border: 1px solid black;
}

.slider img{
  /* position:absolute;  this is updated*/ 
  width:100%;
  height:auto;
  left:0;
  top:0;
  object-fit:cover;
}

.arrows {
  font-size: 3.125em;
  position: relative;
  width: 100%;
}

.arrows .left {
  position: absolute;
  color: white;
  bottom: 1em; //this is updated
  left: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
  transition: 0.3s linear;
}

.arrows .right {
  position: absolute;
  color: white;
  bottom: 1em;//this is updated
  right: 0.4em;
  border: 0.02em solid #fefefe;
  border-radius: 0.14em;
  padding: 0em 0.4em 0.2em;
  background: #F2B8A2;
  transition: 0.3s linear;
}

，html将是：

<div class="slider"><img src="https://i.ytimg.com/vi/suIr-M1p8yU/maxresdefault.jpg" alt="">
      <div class="arrows index">
        <a href="#" class="left"></a>
        <a href="#" class="right"></a>
      </div>
</div>

通过这个你可以将按钮作为滑块的一部分，然后从底部向上移动而不是从顶部向下移动应该为你修复它

位置绝对要素：如何让他做出回应

2 个答案: