html - 中心数字输入，就好像没有箭头一样

Question

我有一个表格，其中包含我在单元格中居中的数字。一行有数字输入，我用 text-align: center 居中。问题是数字在输入框中居中，没有箭头区域(微调器)。我希望值在单元格中居中。

一种解决方案是调整边距，但我发现微调器的宽度会随着屏幕宽度的变化而变化。我不想使用 de margin 选项(除非可以使用百分比或其他东西)

我的代码的一个最小工作示例是:

<table>
<tr>
<td style="text-align:center">5</td>
<td style="text-align:center">10</td>
</tr>
<tr>
<td><input type="number" style="text-align:center" value=15></td>
<td><input type="number" style="text-align:center" value=8></td>
</tr>
</table>

这就是我现在得到的，但我希望你看到它不是很好

感谢所有帮助!

顺便说一句:不是 Center text in html number input 的副本因为无论是否显示微调器，他都担心因此会在输入框中居中。我希望值在表格单元格中居中。

Answer 1

如果我的理解正确，您希望所有值都居中。一种方法是应用 text-align: center所有 <td>元素并隐藏数字输入箭头。这是 css 和随附的 fiddle :

编辑:

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
  opacity: 1;
  margin-left: -14px;
}

td {
  text-align: center;
}

#table1 input {
  width: 100px;
}

#table2 input {
  width: 400px;
}

#table3 input {
  width: 1000px;
}

https://jsfiddle.net/k9jdyawc/2/