我有一个表格,其中包含我在单元格中居中的数字。一行有数字输入,我用 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 的副本因为无论是否显示微调器,他都担心因此会在输入框中居中。我希望值在表格单元格中居中。
最佳答案
如果我的理解正确,您希望所有值都居中。一种方法是应用 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;
}
关于html - 中心数字输入,就好像没有箭头一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51883216/