RWD - 宽度100％溢出的元素

Question

我正在尝试创建我的网站的移动版本，但任何宽度为100％的元素和填充不断溢出我的容器部分。我理解这是因为子元素比填充值的容器更宽，但是如何保持它们的全宽，但是在子元素的左边保留一些填充（因此文本不会粘在浏览器的窗口上） ）？

简单代码：

section#main {
    padding: 100px 0 0 !important;
    width: 100%;
  }
  input, textarea {
    width: 100%;
    padding-left: 20px;
    margin: 0;
  }

结果：

http://tinypic.com/r/2ytxjk9/5

Answer 1

就像你基本上说的那样，100％宽，但添加100px填充。最简单的解决方法是更改​​box-sizing: border-box CSS3属性。这将使其100％宽，包括100px填充。