1

是否可以在跨浏览器解决方案中使 input="text" 框自动调整其宽度？在下面的示例中，文本框调整其宽度，使其达到“文本”文本。是否有任何交叉浏览器解决方案（IE6 和更新版本）？

jsfiddle：http: //jsfiddle.net/P4Qd8/1/

HTML

<div id="wrapper">
    <div id="left">Label</div> 
    <div id="right">Text</div>
    <div id="middle">
        <input id="info" input type="text">
    </div>   
</div>

和 CSS

#wrapper{height: 100px; width: 350px; border: 1px solid blue;}

#left{float:left;}
#middle{float:left;}
#right{float:right;}

#info{width: 100%;}

谢谢你的时间！

4

2 回答 2

0

既然你的问题有JQuery标签，让我给你看一个例子。您可以使用 JQuery 在 IE 中设置宽度，尚未在 IE6 中测试（我不在乎，您应该这样做）但它是 JS 并且应该可以工作。您只能在 IE 中加载它并在 CSS 中操作元素。

$(document).ready(function(){
    var width = $('#middle').width();
    var padding = $('#middle input').css('padding').replace('px','');//the padding defined in css
    var border = $('#middle input').css('border-width').replace('px','');//the border width
    $('#middle input').css('width', width-padding-border*2);
});

在这一点上，我真的不明白你为什么说它width: 100%在 IE 中不起作用，因为它应该。

编辑： JSFiddle：http: //jsfiddle.net/P4Qd8/4/

于 2013-07-12T23:15:52.350 回答
-1

不能只用自动吗？

#wrapper{height: 1em; width: 350px; border: 1px solid blue;}
#left{float:left;}
#middle{float:left;}
#right{float:right;}

#info{width: auto;}
于 2013-07-12T22:40:39.510 回答