100% 宽度的 div 和表单元素 + 填充？答案

【问题标题】：100% Width div's and form elements + padding?100% 宽度的 div 和表单元素 + 填充？
【发布时间】：2010-07-08 18:31:55
【问题描述】：

我必须做些什么来防止以下拉伸超过 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/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>

【问题讨论】：

标签： html css xhtml

【解决方案1】：

您在 div 上的 width:100% 完全没有必要。 Div 是块级元素，会自动扩展到其容器的 100%。从您的 div 声明中删除 width:100% 并且填充将包含在父容器中，不会滚动或扩展宽度。

不要使用负边距，这只是添加一个技巧来实现简单的事情。

您通常可以使用此规则：您几乎不必将 width:100% 放在 div 上（我无法想到为什么要这样做，除非它被内联显示或其他东西），因为如上所述, 块级元素总是扩展到其容器的 100%

编辑：建议在内联显示的 div 上设置 100% 宽度是愚蠢的，因为您无法在内联元素上设置尺寸

【讨论】：

【解决方案2】：

创建一个新的form 规则并将padding: 20px; 声明移动到它。

#box {
    width: 100%;
    border: 1px solid #000;
}

form {
    padding: 20px;
}

【讨论】：