时间戳

首页 > 解决方案 > 将垂直范围滑块与末端的按钮对齐

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

问题描述

我正在尝试创建一个缩放滑块，其中包含一个垂直范围滑块和两端的两个按钮，但无法将滑块与其末端的按钮水平对齐。

#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>

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

标签： htmlcss

解决方案

也许使用 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>

推荐阅读