0
A
回答
1
不是100%肯定它预期的效果,但对于某些浏览器,这可能是你在找什么:
HTML:
<p>
<label>Test</label>
<span><input></span>
</p>
和CSS:
label{width:200px;float:left;}
span{display:block;width:100%;box-sizing:border-box;padding-left:200px;}
input{width:100%;box-sizing:border-box;}
示例:http://jsfiddle.net/48fNt/(至少在铬中工作)
也许你还需要玩白空间:nowrap和一个最小宽度。
0
中显示你不能用CSS独自做到这一点。使用 jQuery AutoResize Plugin
$('#myTextBox').autoResize({
onResize : function() {
//Do something on resize
},
animateCallback : function() {
//Do something after resize
},
animateDuration : 300,//Duration
extraSpace : 40//Extra Space
});
0
据我所知,你不能只为输入CSS做到这一点,但你可以模拟这种行为使用div
与contenteditable
属性 - 演示http://dabblet.com/gist/3150040
HTML
<div contenteditable></div>
CSS
div {
min-width: 150px;
width: auto;
border: solid 1px #ccc;
display: inline-block;
}
0
有一个以上的方法可以达到这个位置
http://jsfiddle.net/rHqE7/4/
<div id="wrap">
<div id="name">Name</div>
<input type="text" name="fname" id="text" />
</div>
#wrap{width:500px;overflow:auto;}
#name{float:left;width:100px;font-size:16pt;padding:10px 5px;}
#text{float:left;min-width:300px;max-height:20px;border:1px solid black;padding:3px;}
你不能只用CSS做它,你将需要的JavaScript。 – Calvein 2012-07-20 10:19:23