怎么让input标签的宽度随着里面的内容变化?

input里面的数据是在js里面赋值的,但是总显示不全,怎么在能根据内容变化宽度呀

 <style>
*{
    margin:0px;
    padding:0px;
    font-size:20;
}
select{
    height:22px;
    width:128px;
}
button{
    width:120px;
    margin-right:3px;
}
input[disabled]{
    border: 0px solid red;
    background-color:#fff;
}
textarea{
    border: 0px solid red;
    background-color:#fff;
    overflow-y:hidden;
    overflow-x:hidden;
}
</style>

<input id="bmmc" type="text" disabled="true"></input>

用一个absolute定位的div,内置一个label(font-size和font-family要和input一样)来计算文字的实际宽度,计算好后再重新设置input的width属性

 <style>
    * {
        margin: 0px;
        padding: 0px;
        font-size: 20;
    }

    select {
        height: 22px;
        width: 128px;
    }

    button {
        width: 120px;
        margin-right: 3px;
    }

    input[disabled] {
        border: 0px solid red;
        background-color: #fff;font-size:14px;font-family:宋体;
    }
    /*调整left属性值键div不可见*/
    #dv{position:absolute;left:-9999999px;top:0;width:9999px;}
    #dv label{font-size:14px;font-family:宋体;}
    textarea {
        border: 0px solid red;
        background-color: #fff;
        overflow-y: hidden;
        overflow-x: hidden;
    }
</style>
<div id="dv"><label></label></div>
<input id="bmmc" type="text" disabled="true"></input>
<script>
    var s = 'abcdefg中干发啦发啦两分钟就分了就发了发放3333333333333333'
    var dv = document.getElementById('dv');
    dv.firstChild.innerHTML = s;
    document.getElementById('bmmc').value = s;
    document.getElementById('bmmc').style.width=dv.firstChild.offsetWidth+'px'
</script>

你可以给input,一个onchange事件,每次更改input的值,触发onchange的方法,方法中,根据值的长度来修改input框的宽度

通过JS
在页面载入完成后
计算需要调整宽度的标签内容宽度并赋值

不知道浮动是否可以满足,float属性修饰的组件具有包裹性,也就是自适应能力。