如何从2个可调整大小的输入元素中删除间隙

Question

**为了快速评估，请在"完整页面"中运行"代码段"，然后调整浏览器屏幕。随着浏览器的变小，数字和输入范围之间的差距会更大

我有两个输入元素叠加在一起。本质上，input范围，其下方显示value编号。

视觉上看起来很吸引人，直到我调整浏览器窗口的大小。输入元素变小(如预期的那样(，尽管现在它们之间有一个间隙，元素越小，间隙就越大。如何消除差距？

HTML(表内(

table {
table-layout: fixed;
position: absolute;
width: 40%;
height: calc(50vh);
left: 30%;
}
td {
width: 50%;
height: calc(2.5vh);
margin: 0;
padding: 0;
}
input[type="text"] {
position: relative;
top: 0;
width: 50%;
text-align: center;
border: none;
background: transparent;
color: black;
font: calc(2.5vh) Risque;
outline: none;
pointer-events: none;
}
.slider {
-webkit-appearance: none;
width: 50%;
height: calc(1.5vh);
border-radius: calc(0.5vh);
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: calc(2.5vh);
height: calc(2.5vh);
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: calc(2.5vh);
height: calc(2.5vh);
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}

<table>
<tr>
<td>
<input type="range" min="0" max="100" value="100" class="slider" id="settings-sfx-range"><br>
<input type="text" id="settings-sfx-range-num" value="100">
</td>
</tr>
</table>

我试着把元素放在<div>而不是<table>中，也会发生同样的事情

Answer 1

添加vertical-align

input[type="text"]{
vertical-align:top;
}
.slider {
vertical-align:bottom;
}

table {
table-layout: fixed;
position: absolute;
width: 40%;
height: calc(50vh);
left: 30%;
}
td {
width: 50%;
height: calc(2.5vh);
margin: 0;
padding: 0;
}
input[type="text"] {
position: relative;
top: 0;
width: 50%;
text-align: center;
border: none;
background: transparent;
color: black;
font: calc(2.5vh) Risque;
outline: none;
pointer-events: none;
vertical-align:top;
}
.slider {
-webkit-appearance: none;
width: 50%;
height: calc(1.5vh);
border-radius: calc(0.5vh);
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
vertical-align:bottom;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: calc(2.5vh);
height: calc(2.5vh);
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: calc(2.5vh);
height: calc(2.5vh);
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}

<table>
<tr>
<td>
<input type="range" min="0" max="100" value="100" class="slider" id="settings-sfx-range"><br>
<input type="text" id="settings-sfx-range-num" value="100">
</td>
</tr>
</table>