html - 在静态长度INPUT字段左侧自动调整SELECT的大小

我正在尝试自动将SELECT大小调整为固定长度INPUT（数字）的左边。像这样：

我在选择上使用了可怕的width = 83％，在输入上使用width = 3em得到了这个结果。当然，这完全没有响应。问题是，当我说width = auto时，它将调整为下拉框内容的长度，而不是其所在网格中的可用大小。

因此：如何自动调整SELECT的大小以利用可用的剩余空间？

内容：

<div class="col-4">
<select name="class" style="width:83%; vertical-align:top;">
      <option value=""></option>
      <option value="11" selected>Warlock</option>
</select>
<input style="width: 3em; vertical-align:top; text-align: center;" type="number" step=1 min=1 max=20 name="class_level" value="8">
</div>

最佳答案

使用calc：

select { width: calc(100% - 3em); }

如果需要，在计算中添加一些边距。

关于html - 在静态长度INPUT字段左侧自动调整SELECT的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57717774/