Question

我正在尝试使用div创建一个基本滑块，我得到了结构。

我的家长div有一个班级slider三个孩子div名为button1 buttpn2和range，我希望按钮display: relative以便当我使用{{1}时它应该移动的按钮上的{或left属性。

我意识到它是right，但是如何制作所需的滑块效果？

position: relative

.slider {
  width: 300px;
  height: 5px;
  background-color: #a0a0a0;
  display: flex;
  align-items: center;
}

.slider div {
  display: inline-block;
}

.button {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: red;
  position: relative;
}

#button1 {
  left: 25px;
}

#button2 {
  right: 50px;
}

.button:hover {
  cursor: pointer;
}

.range {
  flex-grow: 2;
  height: 5px;
  background-color: blue;
}

Answer 1

在包含div上设置position：relative，而不是按钮。将按钮设置为position：absolute;

.slider{
  width:300px;
  height:5px;
  background-color:#a0a0a0;
  display:flex;
  align-items:center;
  position: relative;
}
.slider div{
  display: inline-block;
}
.button{
  width:10px;
  height:10px;
  border-radius:5px;
  background-color:red;
  position: absolute;
}
#button1{
  left:25px;
}
#button2{
  right:50px;
}
.button:hover{
  cursor:pointer;
}
.range{
  flex-grow:2;
  height:5px;
  background-color:blue;
}

<body>
  <div class="slider">
    <div class="button" id="button1"></div>
    <div class="range"></div>
    <div class="button" id="button2"></div>
  </div>
</body>

如何将flex-grow div限制在位置：相对div？

1 个答案: