自适应输入宽度css

Question

我在输入文字时遇到问题，可以将其设为“自适应”吗？如果我添加输入为宽度，则左侧将有太多不必要的空间。同样，如果宽度不够，您将看不到整个输入。

        input[type="text"]{
        max-width: 50px;
        border: none;
        background: transparent;
        font-size: 20px;
        color: whitesmoke;
        padding: 5px;
        font-weight: bold;
        }

<input type="text" id="answer5" disabled="disabled"/>

是否有办法使该区域具有“适应性”？因此，如果答案仅为1，则右侧的文本更接近数字，如果答案更长，则可以看到整个答案。

谢谢

Answer 1

不使用max-width，而是使用带有百分比或px的宽度。这将使元素具有自适应性。

Answer 2

您可以使用flex容器来处理此问题，并使用flex-grow: 1作为子元素，这应该占用最多的可用空间。

.container {
  display: flex;
  align-items: center;
}

.container [type="text"] {
  flex-grow: 1;
  margin: 0 .5em;
}

input[type="text"] {
  border: none;
  background: transparent;
  padding: 5px;
  font-weight: bold;
  border: 1px solid #333;
  padding: .5em.75em;
}

<div class="container">
  <label for="textInput" class="first">The following number:</label>
  <input type="text" id="textInput">
  <span class="result">is numeric</span>
</div>

jsFiddle

Answer 3

您可以将默认宽度设置为与1个字符的宽度相对应（取决于字体设置）。然后在每次按键更新：

$(".answer").keypress(function() {
  this.style.width = ((this.value.length + 1) * 12) + 'px';
})

JSFiddle

如果您不手动将数据输入字段，而是通过代码进行设置，则可以使用change。这将在两种情况下都有效，但仅在焦点不再位于输入字段上时才可见：

$(".answer").change(function() {
    this.style.width = ((this.value.length + 1) * 12) + 'px';
})