Question

我有一个只读的HTML <input>，我想像<span>那样展示。

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

input[readonly] {
  background:none; color:inherit; /* normal colors     */
  border:0; margin:0; padding:0;  /* no special sizing */
  width:auto; display:inline;     /* try to make it inline and auto-size */
}

演示：http://jsfiddle.net/52vL3/

如何使用CSS？

使输入停止需要明确的大小？

Answer 1

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

来显示

-webkit-appearance: none

现在你的内联输入仍然没有调整大小。问题是输入不会自动调整其值，即使是内联也是如此。

如果它是type="text"输入，您可以在输入上设置size="2"（默认值为20），并相应地调整它的大小（尽管有一些额外的空间）。

不幸的是，type="number"忽略了size属性。

因此，您可以尝试使用模式而不是type="number"

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

您可能希望在使其可编辑时增大尺寸，因为输入不会自动扩展以适应更宽的值。

有关在输入时自动调整输入大小的方法，请参阅this question。

或者，根据您的使用方式，您可能会考虑<span contenteditable="true">

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

演示：http://jsfiddle.net/52vL3/

1 个答案: