定义 <input type="number"> 的大小答案

【问题标题】：Define the size for <input type="number">定义 <input type="number"> 的大小
【发布时间】：2020-02-16 03:31:17
【问题描述】：

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

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

但是width 属性仅适用于<input type="image">，或者size 属性不适用于设置为type 的type 属性@。还有哪些其他选择？（最好是 HTML，或者 CSS，仅此而已）

注意：听起来有一个css解决方案，如下所示，但是为了更清楚起见，我必须添加这个问题不是关于为input元素的number类型设置最大/最小值，而是宽度。 CSS，如下所示，解决了这个问题，虽然我还没有看到 HTML 解决方案，但这对我来说已经足够了。谢谢

【问题讨论】：

标签： html css

【解决方案1】：

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

&lt;input type="number"&gt;

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

【讨论】：

【解决方案2】：

width 应该可以工作。至少它可以在以下 sn-p 中的 Firefox 上运行：

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

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

【讨论】：

【解决方案3】：

好的，很简单。所有你必须使用 CSS 来定义宽度。

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

然后

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

并使用更多的 css 样式让它变得华丽。

【讨论】：