Css 强制输入以自动宽度内联显示

我有一个只读HTML

，我想像

一样显示它

但是，在Windows上的Chrome v34中，应用以下CSS会使其保持为

内联块

输入[只读]{
背景：无；颜色：继承；/*普通颜色*/
边框：0；边距：0；填充：0；/*无特殊大小*/
宽度：自动；显示：内联；/*尝试使其内联并自动调整大小*/
}

演示：

---

如何使用CSS使输入不再需要显式大小？

这里发生了很多事情，但内联块不是您的问题。这可以通过添加

-webkit-appearance: none

现在，您将拥有一个仍然没有调整自身大小的内联输入。问题是，即使是内联输入，输入也不会自动根据其值调整大小

如果是

type=“text”

输入，则可以在输入上设置

size=“2”

（默认值为20），并相应地调整其大小（尽管有一点额外的空间）

不幸的是，

type=“number”

忽略了size属性

因此，您可以尝试使用模式而不是

type=“number”

但是，在将其设置为可编辑时，您可能希望增加大小，因为输入不会自动展开以适应更宽的值

有关键入时自动调整输入大小的方法，请参见

---

或者，取决于你如何使用它，你可能想考虑<代码> <代码>

这里我使用了<代码> <代码>，而不是<代码> <代码>或<代码> <代码>，因为元素可以在用户可编辑或不可编辑之间切换，并且我宁愿不必在里面和之外交换元素。好问题…即使它是内联的，当你减少宽度时，在右边也有一个类似于填充的空间。例如：将宽度设置为25px，其他内容保持不变

contenteditable

span，而不是输入选项？@BrettWeber谢谢，但内容的大小可能会有所不同。

<input value="64" type="text" pattern="\d*" size="2" readonly>