自适应输入宽度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，而应将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';
})