{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 兄弟一词,经得起流年. 的问题《Can I stop 100% Width Text Boxes from extending be》','https://www.manongdao.com/q-1167847.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Lets say I have a text box that I want to fill a whole line. I would give it a style like this:
input.wide {display:block; width: 100%}
This causes problems because the width is based on the content of the text box. Text boxes have margin, borders, & padding by default, which makes a 100% width text box larger than its container.
For example, here on the right:
Is there any way to make a text box fill the width of its container without expanding beyond it?
Here is some example HTML to show what I mean:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
#inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
input.wide {display:block; margin: 0px}
input.normal {display:block; float: right}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<input type="text" class="wide" />
<input type="text" class="normal" />
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
If this is run, you can see by looking at the "normal" text box that the "wide" text box is sticking out beyond the container. The "normal" text box floats to the actual edge of the container. I'm trying to make the "wide" text box fill its container, without expanding beyond edge like the "normal" text box is.
One solution that may work (it works for me) is to apply negative margin at input (textbox)... or fixed width for ie7 or to drop ie7 support. This results to pixel perfect width.. For me its 7 so i added 3 and 4 but it is still pixel perfect..
I had the same problem and i hated to have extra divs for border etc!
So here is my solution which seems to work!
You should use a ie7 only stylesheet to avoid the starhacks.
What you could do is to remove the default "extras" on the
input:This will keep the
inputinside its container. Now if you do want the borders, wrap theinputin adiv, with the borders set on thediv(that way you can remove thedisplay:blockfrom theinputtoo). Something like:Edit: Another option is to, instead of removing the style from the
input, compensate for it in the wrappeddiv:This will give you somewhat different results in different browsers, but they will not overlap the container. The values in the div depend on how large the border is on the
inputand how much space you want between theinputand the border.This solved the problem for me!
Without the need for an external div. Just apply it to your given text box.
With this property "The width and height properties (and min/max properties) includes content, padding and border, but not the margin"
See description of property at w3schools.
Hope this helps someone!
If you can't use
box-sizing:border-boxyou could try removing thewidth:100%and putting a very largesizeattribute in the<input>element, drawback is however you have to modify the html, and can't do it with CSS only:If you don't need to do it dynamically (for example, your form is of a fixed width) you can just set the width of child
<input>elements to the width of their container minus any decorations like padding, margin, border, etc.:Just style the input to offset for the extra padding. In the following example the padding on the input would be 10px on the left and right for a total padding offset of 20px: