使輸入=「文本」自動寬度（跨瀏覽器解決方案）

是否有可能使一個輸入=「文本」框自動調整其寬度跨交叉解決方案？在下面的例子中，文本框調整它的寬度，使其達到「文本」文本。是否有任何crossbroswer解決方案（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%;}

感謝您的時間！

來源

2013-07-12 Vode

所以你在IE測試這一點，它沒有工作？（我的Chrome似乎按照需要工作） – acdcjunior

我不明白，這***不***工作？如果是這樣，什麼瀏覽器？ – Dom

這不工作在IE6和IE7溢出的原因：隱藏。中間div將自己放置在一個新行上，並且是父元素的100％寬度。 – Vode

-1

難道你不能只使用自動？

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

#info{width: auto;}

來源

2013-07-12 22:40:39 MCsuchNsuch

否，那麼div只是調整自己的文本框大小。 – Vode

由於您的問題有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-12 23:15:52

寬度100％在IE中工作，問題是寬度100％使文本框100％的其父元素。並且文本框被放置的div是沒有任何寬度的浮動，所以結果是它的父元素的100％。 – Vode

使輸入=「文本」自動寬度（跨瀏覽器解決方案）

回答

相關問題