Question

我正在设置一个带有<input type="number">的简单HTML界面。问题在于<input>元素占用了太多空间（大约需要10列，但我只需要两列）。

因为输入内容永远不会超过两位数，所以我想为<input type="number">元素定义为2个字符的大小。

但是，width属性仅适用于<input type="image">，或者size属性不适用于设置为type的{{1}}属性。还有什么其他选择？（最好是HTML或CSS，别无其他）

注意：听起来好像有一个css解决方案，如下所示，但是为了更加清楚，我必须添加这个问题，不是要为number类型的number类型设置max / min值，而是宽度。如下所示，CSS解决了该问题，尽管我还没有看到HTML解决方案，但这对我来说已经足够了。谢谢

Answer 1

width应该可以工作。至少在以下代码段中它可以在Firefox上运行：

input[type=number] {
  background: #fc9;
  width: 30px;
}

<form method="post">
  <input type="number" name="x" value="23"/>
</form>

Answer 2

input[type="number"] {
  width: 2.5em;
}

<input type="number">

em可用于根据字体大小设置元素的宽度样式。唯一的问题是，您必须使元素宽于两个字符，因为向上和向下箭头在输入框内也需要一些空间。尝试将宽度重新调整为2em而不是2.5em，您会明白我的意思。

Answer 3

好，非常简单。您只需使用CSS来定义宽度。

<input type="number" class="form-control">

然后

.form-control{
     display: block;
     width: 20%; //for two column
    }

并使用更多的CSS样式使其更漂亮。