100% Width div's and form elements + padding?
What do I have to do to prevent the following from stretching more than 100%? It obviously stretches to 100% then adds on the padding... Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
#box {
width: 100%;
padding: 20px;
border: 1px solid #000;
}
#box input {
width: 100%;
开发者_如何学Go padding: 5px;
}
</style>
</head>
<body>
<div id="box">
<form>
<input type="text" value="" />
</form>
</div>
</body>
</html>
Your width:100% on the div is altogether unnecessary. Div's are block level elements which automatically expand to 100% of their container. Remove the width:100% from your div declaration and the padding will be contained within the parent container, no scrolling or extended width.
DON'T use a negative margin, that's just adding a hack to achieve something simple.
You can use this rule in general: You almost never have to put width:100% on a div (I can't think off the top of my head why you would unless it was displayed inline or something) because as mentioned above, block level elements always expand to 100% of their container
edit: that was dumb to suggest setting width 100% on a div displayed inline as you can't set the dimensions on an inline element
Create a new form rule and move the padding: 20px; declaration to it.
#box {
width: 100%;
border: 1px solid #000;
}
form {
padding: 20px;
}
加载中,请稍侯......
精彩评论