In HTML, how can I get an input box to stretch in IE8?
I have uploaded the following simple HTML code to http://losthobbit.net/temp/anchor.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Anchor Test</title>
</head>
<body>
<div style="width:100%;height:100%">
<input maxlength="250" type="tex开发者_如何学编程t" name="Text2" id="Text2" style="position: absolute;
top: 13px; left: 265px; right: 15px; height: 20px; text-align: Left">
</div>
</body>
</html>
As you can see, I've specified the left and right, but not the width, in order to get it to stretch.
In Chrome it stretches as one resizes the browser, but this does not work in IE8 or FireFox. Any ideas about how I can fix this?
Thank you
Please note that people are suggesting I use a width percentage... unfortunately it doesn't solve my problem. I want the exact same behaviour that I have in Chrome, which is that of a left and right anchor. This means that the stretching is not a fixed percentage.
Give the <input> a parent element, set your current styles on that and give the <input> element width:100%.
<div style="width:100%;height:100%">
<span style="position: absolute; top: 13px; left: 265px; right: 15px; height: 20px; text-align: Left">
<input maxlength="250" type="text" name="Text2" id="Text2" style="width:100%; height:100%;">
</span>
</div>
Working demo: http://jsbin.com/ayiwa5
You have to specify the percentage width explicitly on the <input type="text" /> for IE and firefox.
See this jsfiddle: http://jsfiddle.net/LKnJT/2/
It is quite quirky with the absolute positioning but it will make the textbox resize with the browser window.
Note: if you remove the style="width:100%;height:100%" from the div it will still resize in Chrome.
[Update]
Try this one: http://jsfiddle.net/LKnJT/5/. Tested in chrome and IE. It keeps the textbox between the left and right specifications.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Anchor Test</title>
</head>
<body>
<div style="position:absolute;left:150px;right:20px;">
<input maxlength="250" type="text" name="Text2" id="Text2" style="text-align:left;width:100%">
</div>
</body>
</html>
How much do you want it to stretch? You can specify width but set its value in terms of percentage:
width: 40%;
UPDATE:
Apply this to the input:
float: right;
width: 80%;
Just make sure to clear float on the parent container.
加载中,请稍侯......
精彩评论