Question

我正在尝试创建一个具有垂直范围滑块和两端都有两个按钮的缩放滑块，但是无法将滑块与两端的按钮水平对齐。

#zoomcontrol {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 500px;
  background-color: yellow;
}

#zoomrange,
#minus,
#plus {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

#zoomrange {
  height: 150px;
  position: relative;
  top: 30px;
  -webkit-appearance: slider-vertical;
}

#minus {
  top: 180px;
}

#minus,
#plus {
  background: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin: 5px;
  text-align: center;
  line-height: 25px;
}

<div id="zoomcontrol">
  <div id="plus">+</div>
  <input type="range" min="1" max="100" value="50" class="slider" id="zoomrange" orient="vertical">
  <div id="minus">-</div>
</div>

（另外，有人可以告诉我为什么减号按钮比加号按钮更远离滑块吗？）

Answer 1

您需要补偿按钮的宽度及其边距，以及#zoomrange本身的宽度。

#minus, #plus {
  left: calc(50% - 16px);
  transform: none;
}

Answer 2

也许使用flexbox可以在绝对定位方面有所帮助；

#zoomcontrol {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  height: 500px;
  background-color: yellow;
}

#zoomrange,
#minus,
#plus {}

#zoomrange {
  height: 150px;
  -webkit-appearance: slider-vertical;
}

#minus,
#plus {
  background: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin: 5px;
  text-align: center;
  line-height: 25px;
}

<div id="zoomcontrol">
  <div id="plus">+</div>
  <input type="range" min="1" max="100" value="50" class="slider" id="zoomrange" orient="vertical">
  <div id="minus">-</div>
</div>

将垂直范围滑块与末端的按钮对齐

2 个答案: