100％宽div和表单元素+填充？ [英] 100% Width div's and form elements + padding?
问题描述
我必须做些什么才能防止以下情况超过100％？它显然延伸到100％，然后添加填充...谢谢！
<！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/xhtmlxml：lang =enlang =en>
< head>
< style type =text / cssmedia =screen>
#box {
width：100％;
padding：20px;
border：1px solid＃000;
}
#box input {
width：100％;
padding：5px;
}
< / style>
< / head>
< body>
< div id =box>
< form>
< input type =textvalue =/>
< / form>
< / div>
< / body>
< / html>
宽度：100％ 在div上完全没有必要。 Div是块级元素，可自动扩展到其容器的100％。从div声明中删除 width：100％，并且填充将包含在父容器中，不滚动或扩展宽度。 请勿使用负余量，这只是简单地加入黑客。
您一般可以使用这个规则：您几乎从来没有在一个div上放置 width：100％（我无法想象自己为什么会这么做，除非它被显示为内联或其他东西），因为如上所述，块级元素始终扩展到其容器的100％
编辑：这是愚蠢的建议设置宽度100％的内联显示，因为你不能设置内联元素的尺寸
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%;
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
这篇关于100％宽div和表单元素+填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
