Html 使输入元素像跨距一样自动调整大小

在不被告知的情况下知道水平尺寸。它的水平大小不大于其内容

我试图找出CSS，使一个

自动根据其

值的长度水平调整其大小，就像
使用其
内部文本一样

换句话说，在
上不指定CSS
宽度：
或
大小
属性

我不知道该怎么做。有什么想法吗？
如果我正确理解了你的问题，你希望跨度和输入的宽度无论怎样都相同，对吗

如果是这样的话，我会这样做：

用div包装span和input

那么

并将包装div设置为所需的任何宽度，两个元素应对齐（自动对齐，不管是什么），且宽度相同。
如果要在键入时扩展或增加输入字段的宽度，可以执行以下操作

<div>
    <span contenteditable="true">sdfsd</span>
</div>


或者您可以使用一些jQuery来实现这一点

<input size="1" />

这是一种方式：
span{
    border: solid 1px black;
}
div{
    max-width: 200px;   
}

<input size="1" />

$('input').on('keydown', function(evt) {
    var $this = $(this),
        size = parseInt($this.attr('size'));

    if ( evt.which === 8 ) {
        // backspace
        $this.attr('size', size - 1);
    } else {
        // all other keystrokes
        $this.attr('size', size + 1);
    }
});