如何在div的边缘设置按钮？

Posted 2021-04-10

我有一个奇怪的问题，我很难用CSS因此我想出了这个练习，我想在一个数组中加入10个图像，在一个名为slider-div，宽度为1000px的div中构建一个图像滑块进入div只有5个可见，所以用户必须滚动。

要了解更多信息，我添加了两个按钮，它们应滚动100px（左或右），我有这些按钮的问题，它们坚持父滑块-div /背景。我希望他们永远保持领先，不要动。用户可以决定滚动到结尾或按下按钮。我正在使用display：flex;弯曲方向：行;将图像放入一行。

如何将按钮固定到div的可见边缘？

我解决的唯一解决方案是：位置：固定;右：33.6％;但这是非常不专业的:(当我在其他地方更改布局时也很糟糕。你能看一下并告诉我错误在哪里缺少了吗？这是codepen的链接：

https://codepen.io/miomate/pen/pBQBya

码：

.div-1 {
  max-width: 1000px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  position: absolute;
}

button{
  /* position: absolute; */
  top:35%;
}

.images {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

.x {
  position: absolute;
  top: 30%;
}
.div-2-1{

}
.div-2-2{
right: 0;
}

图像未加载但结果相同。非常感谢你。

答案

这是我使用css的“bottom”属性的解决方案。

body {margin: 0 0 0 0;}
.div-1 {
  max-width: 1000px;
  height: 300px;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
}

.images {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

.x {
  position: absolute;
  bottom: 0;
}
.div-2-1{
  left:0;
}
.div-2-2{
 right: 0;
}