按照this教程的要求，我能够创建一个范围滑块，并根据我的需要进行定制
var inputs = document.querySelectorAll("input");
for (var input of inputs)
{
console.log("processing")
input.oninput = progressScript
input.oninput()
}
function progressScript() {
const sliderValue = this.value;
this.style.background = `linear-gradient(to right, white ${sliderValue}%, rgb(44, 160, 255) ${sliderValue}%)`;
}body
{
background: rgb(41, 62, 72);
color: white;
font-size: 30px;
}
input[type=range] {
-webkit-appearance: none;
appearance: none;
width: 300px;
height: 10px;
background: rgb(44, 160, 255);
border-radius: 15px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: rgb(41, 62, 72);
border: 3px solid white;
box-shadow: 0 0 0 1px rgb(41, 62, 72);
}
div
{
height: 30px;
margin-top: 30px;
margin-bottom: 30px;
}
span
{
margin-left: 10px;
margin-right: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Skills:</p>
<div>
<span>C++</span>
<input type="range" name="volume" />
</div>
<div>
<span>C#/.NET</span>
<input type="range" name="cowbell" />
</div>
<script src="script.js"></script>
</body>
</html>现在，我想确保我的跨度的中心线与范围滑块的中心线对齐，这样最终的结果看起来像这样，没有红线(包括只是为了清晰):
如何才能使两个内联元素从它们的中心线对齐？
